Interaktives 3D-Weberlebnis für Prescott & Davies Law
Dieses Projekt bringt eine in Blender modellierte Themis-Statue in eine three.js-Szene und verwandelt so eine klassische Kanzlei-Website in ein desktop-fokussiertes, interaktives 3D-Erlebnis. Beim Laden der Seite werden Besucher mit Kamera- und Lichtanimationen rund um die Statue empfangen und gelangen anschließend in separate 3D-Szenen, die mit den einzelnen Rechtsgebieten verknüpft sind.
Ein kurzer Überblick über die eingesetzten Tools und die konkret gelieferten Bausteine – von der 3D-Modellierung in Blender bis zur produktiven three.js-Implementierung im Browser.
Hero-Szene mit 3D-Themis
Eine in Blender modellierte Themis-Statue steht im Zentrum des Hero-Bereichs – gerendert mit three.js und mit dezenter Rotation, die das gesamte Erlebnis verankert.
Rechtsgebietsspezifische 3D-Szenen
Jedes Rechtsgebiet (Beratung, Verträge, Strafrecht, Arbeitsrecht, Immobilien) löst ein eigenes GLTF-Modell mit zugehörigem Inhalt aus – inklusive animierter Übergänge zwischen den Objekten.
Zweiszenen-Setup in three.js
Eine Szene ist dem zentralen Themis-Hero gewidmet, während eine zweite Szene die leistungsspezifischen Modelle verwaltet – jeweils mit eigener Kamera und eigenem Renderer.
Zeitgesteuerte Intro-Animation für Kamera und Beleuchtung
Beim ersten Laden bewegt sich die Kamera vom Sockel der Statue hinauf zum Gesicht, während Modellrotation und Lichter auf einer gemeinsamen Tween-Timeline animiert werden.
Mausreaktive Beleuchtung und individueller Cursor
Richtungs- und Fülllichter reagieren sanft auf Mausbewegungen, und ein nachlaufender, individuell gestalteter Cursor legt eine subtile Interaktionsebene über das gesamte Layout.
Desktop-fokussiertes Erlebnis und Ladeprozess
Draco-komprimierte Modelle werden über einen eigenen Loading-Manager mit Overlay geladen, und mobile Besucher erhalten einen dedizierten Hinweis auf das für Desktop optimierte Erlebnis.
Lassen Sie uns gemeinsam bauen
Bringen Sie Ihr Unternehmen mit den Lösungen von dodbyte creative studio voran – nehmen Sie jetzt Kontakt auf