3D model dosyalarının sayfa içine eklenmesini ve kullanıcının model ile etkileşimde olması sağladım. Farenin tuşları ile modelin ve kameranın konumunu kontrol edebilirsiniz. Ekranın alt ve sağ kısımlarına eklediğim butonlarla da sahneyi kontrol edebilirsiniz. Animasyon butonları ile animasyonlar arasında geçiş yapabilir, kamera ve modelin x-y-z kordinatlarını sağ alt köşedeki 8 buton ile belirleyebilirsiniz. Yatay konumlandırdığım slider ile animasyon hızını (0-2.0 değerleri arasında), dikey konumlandırdığım slider ile zoom seviyesini ayarlayabilirsiniz. Sağ üst köşeden "Sahne Arkaplanı" ile "Varsayılan, Çimen, Uzay, Yağmur" olarak belirlediğim 4 adet sahne dünyası arasında geçiş yapabilirsiniz. Farklı sahneler için farklı ışıklandırmalar ve sahne içi etkileşimler dizayn ettim. Tam ekran butonu ile de sahneyi tam ekran yapabilirsiniz. Sağ alt kısımdaki 8 tuş arasındaki buton ile de tüm sahneyi sayfayı yenilemeden varsayılan değerlerine getirebilirsiniz.
Ben bu projemde .vrm uzantılı dosyaları kullandım ama her tür 3D uzantılı modeli kullanmak mümkün. Bu uygulamayı üzerimde çalıştığım projemde kullanmak üzere Cgtrader ve Sketchfab gibi model sitelerindeki görüntüleyicilerden esinlenerek geliştirdim.
...
Bu Projede Yapılabilecekler:
- İstenilen sayıda animasyon, model ve sahne eklenebilir
- 3D rigged modellerin kontrolü için oyunlardaki gibi klavye kullanılacak şekilde geliştirilebilir
- 3D modeller sayfaya sadece pencere içinde değil, sayfayla bir büyün olacak şekilde yerleştirilebilir
- ...
Muhtemel Kullanım Alanları:
- Firmalar ürünlerini (Araba, gözlük, telefon...) ilan sayfalarında 3D göstererek müşterilerin dikkatini çekebilir
- Gayrimenkul şirketleri müşterilerine 3D bir deneyim sunarak satışını yaptıkları gayrimenkulleri daha cezbedici bir sunumla gösterebilirler
- 3D model şatını yapan kişi veya kurumlar satışını yapacakları modelleri doğrudan sayfalarında gösterebilir
- ...
...
Ürünlerini tanıtmak isteyen firmaların bu tarza en yakın yaptıkları şey ürünün farklı açılardan çekilmiş fotoğraflarını bir araya getirerek 360° bir sunum yapmaları oluyor. Fakat bu durum ürünün tüm detayları görmeye yetmiyor. Kişi ürüne sadece fotoğrafların çekildiği açılardan bakabiliyor ve bu etkileşime pek bir katkı sağlamıyor. Etkileşimin ve interaktivitenin fazlasıyla arttığı günümüzde bir adım daha önde olmak gerekiyor. Teknoloji artık bunu kolay bir şekilde müşteri ile buluşturma imkanı sunuyor ve bu diğerlerinden farklı olmanın ve çağı yakalamanın en iyi yollarından biri.
...
Proje Next.JS üzerine kurulmuş, Three.JS kullanılmış, Typescript dilinde yazılmış ve TailwindCSS ile dizayn edilmiştir.
...