3D etkileşimli web deneyimi: Prescott & Davies Law
Bu proje, Blender'da modellenen bir Themis heykelini three.js sahnesine taşıyarak klasik bir hukuk bürosu web sitesini masaüstü odaklı, 3D etkileşimli bir deneyime dönüştürüyor. Sayfa yüklendiğinde kullanıcılar heykelin etrafında dönen kamera ve ışık animasyonlarıyla karşılanıyor, ardından her çalışma alanına bağlı ayrı 3D sahnelere geçiyor.
Blender'daki 3D modellemeden tarayıcıdaki canlı three.js uygulamasına kadar kullandığımız araçlara ve teslim ettiğimiz somut parçalara kısa bir bakış.
3D Themis'li hero sahnesi
Blender'da modellenen Themis heykeli, three.js ile render edilip hafif bir dönüş animasyonuyla hero bölümünün merkezinde durarak tüm deneyimin çıpasını oluşturuyor.
Çalışma alanına özel 3D sahneler
Her hukuk alanı (danışmanlık, sözleşmeler, ceza, iş, gayrimenkul) kendi GLTF modelini ve içeriğini tetikliyor; objeler arasında animasyonlu geçişler yer alıyor.
Çift sahneli three.js kurulumu
Bir sahne ana Themis hero bölümüne ayrılırken, ikinci sahne hizmetlere özel modelleri yönetiyor; her birinin kendi kamerası ve renderer'ı bulunuyor.
Kamera ve ışık için zamanlanmış giriş animasyonu
İlk yüklemede kamera heykelin kaidesinden yüzüne doğru hareket ederken, model dönüşü ve ışıklar ortak bir tween zaman çizelgesi üzerinde animasyona giriyor.
Fareye duyarlı ışıklandırma ve özel imleç
Yönlü ve dolgu ışıkları fare hareketine yumuşakça tepki veriyor; iz bırakan özel imleç ise tüm sayfa düzeninin üzerine ince bir etkileşim katmanı ekliyor.
Masaüstü odaklı deneyim ve yükleme akışı
Draco ile sıkıştırılmış modeller özel bir yükleme yöneticisi ve overlay üzerinden yükleniyor; mobil ziyaretçiler ise masaüstüne optimize edilmiş deneyim hakkında özel bir bilgilendirme görüyor.
Birlikte inşa edelim
Hemen iletişime geçerek dodbyte creative studio çözümleriyle işinizi büyütün