Three.js ile 3D web geliştirme

Three.js ne zaman doğru seçim

Three.js, tarayıcının WebGL desteğini kullanarak web sayfasında 3D sahne çizen bir JavaScript kütüphanesidir. Uygulama indirmek gerekmez; bağlantıyı açan herkes sahneyi telefonda ya da bilgisayarda görür. En çok işe yaradığı yer, müşterinin bir ürünü kendi ihtiyacına göre ayarladığı ve sonucu anında gördüğü tasarlayıcılardır.

Three.js’in iyi oturduğu durumlar

Ürününüz ölçüye ya da seçeneklere göre değişiyor ve müşteri sonucu görmeden karar vermekte zorlanıyor
Satış görüşmesinden önce müşterinin kendi tasarımını hazırlayıp size göndermesini istiyorsunuz
Bir mekânı, yerleşimi ya da ürünü her açıdan göstermek fotoğraftan daha çok şey anlatıyor
Tanıtım sayfasında içeriği gölgelemeyen hafif bir görsel efekt istiyorsunuz

Three.js’i önermeyeceğimiz durumlar

Birkaç iyi fotoğraf ya da kısa bir video ürünü yeterince anlatıyor
Üretime gidecek kesin teknik çizim gerekiyor: tarayıcıdaki tasarım bir ön çalışmadır, mühendislik çiziminin (CAD) yerini tutmaz
Asıl ürün bir oyun ya da sanal gerçeklik deneyimi: bunun için oyun motorları daha uygun

Atölye Tasarım: okul atölyesini tarayıcıda kurmak

okultasarım.com için yaptığımız tasarlayıcıda okul, atölyesini dört adımda kuruyor: odanın ölçülerini ve biçimini giriyor, öğrenci sayısını ve kademeyi seçiyor, renkleri belirliyor, sonra tasarımı WhatsApp’tan firmaya gönderiyor. Ahşap, seramik ve sanat, gastronomi atölyeleri için ayrı tasarlayıcılar var. Kodda öne çıkan kararlar:

Yerleşimi React’ten bağımsız, saf bir TypeScript fonksiyonu hesaplıyor: kapı önü, pencereli duvarlar ve koridorlar gözetilerek tezgâh, masa ve tabureler yerleştiriliyor; bu kurallar testlerle kontrol ediliyor.
Hazır 3D model dosyası yok. Tezgâh, masa, tabure, tavan çerçevesi ve tabela, ölçülerini parametre olarak alan bileşenlerle kodla üretiliyor; ölçü değişince model de değişiyor.
Tabureler parça başına tek bir InstancedMesh ile çiziliyor; öğrenci sayısı arttıkça çizim çağrısı sayısı artmıyor.
Modül eklendiğinde ya da ölçü değiştiğinde parçalar yaylı bir animasyonla yerine oturuyor; hiçbir şey sıçrayarak yer değiştirmiyor.
Gelişmiş modda oda L biçiminde olabiliyor; kolonlar ve duvar öğeleri kuşbakışı planda sürüklenerek yerleştiriliyor.
Tasarım sıkıştırılarak adres çubuğunda tutuluyor; sayfa yenilense ya da bağlantı paylaşılsa da kaybolmuyor.
Gönderirken sahne sabit kamera açılarından görüntüye çevriliyor ve bir paylaşım görseli oluşturuluyor; firma tasarımı kendi paylaşım sayfasında görüyor.

Saf Three.js mi, React Three Fiber mı

İkisini de kullanıyoruz. Çok parçalı ve arayüzle sürekli konuşan sahnelerde React Three Fiber’ı seçiyoruz: sahnedeki her mobilya bir React bileşeni, paneldeki her değişiklik sahneye doğrudan yansıyor. Tek parçalı bir görsel efekt içinse saf Three.js ve kendi yazdığımız shader daha az kod ve daha küçük bir paket demek. Bu sitenin ana sayfasındaki, fareyi izleyen parçacık alanı böyle yazıldı; görünür olmadığında ya da sekme arka plandayken çizim duruyor.

	React Three Fiber	Saf Three.js
Sahne nasıl yazılır	React bileşenleri olarak	Nesneler kodla tek tek oluşturulur
Arayüzle bağlantı	Panel ve sahne aynı durumu paylaşır	Bağlantı elle kurulur
Uygun olduğu yer	Tasarlayıcılar, çok parçalı etkileşimli sahneler	Tek parçalı efektler, hafif arka planlar
Bizim örneğimiz	Atölye Tasarım	pepechura.com ana sayfasındaki parçacık alanı

Three.js’in yanında kullandığımız araçlar

React Three Fiber

Three.js sahnesini React bileşenleriyle kurmak için. Atölye Tasarım’ın bütün sahnesi bununla yazıldı.

drei

Hazır kamera kontrolleri, ortam ışığı, temas gölgeleri, 3D yazı ve performans izleme. Perspektif ile kuşbakışı plan arasındaki geçiş drei’nin CameraControls’ü ile yapılıyor.

postprocessing

Köşelerde ve birleşim yerlerinde yumuşak gölge (N8AO) ve sinematik ton eşleme. Telefonlarda kapalı, bilgisayarda kare hızı düşerse kendiliğinden kapanıyor.

react-spring

Modüllerin yerine oturması ve ölçü değişimleri için yaylı animasyonlar (@react-spring/three).

Zustand

Tasarlayıcının paneliyle sahnesi arasında paylaşılan tasarım durumu.

Test Renderer ve Vitest

Sahne bileşenleri @react-three/test-renderer ile tarayıcı açmadan test ediliyor; yerleşim ve fiyat hesabı Vitest ile ayrıca test ediliyor.

Bir 3D tasarlayıcı projesi nasıl ilerliyor

01
Ücretsiz keşif görüşmesi
30 dk
Ürününüzün hangi ölçü ve seçeneklerle değiştiğini, müşterinin tasarımı bitirince ne yapacağını ve aklınızdaki bütçeyi konuşuyoruz.
02
Yazılı kapsam ve teklif
Seçenekleri, yerleşim kurallarını, telefonda ve bilgisayarda hedeflenen görüntü kalitesini ve kabul kriterlerini yazıyoruz.
03
Haftalık sürümler
Her hafta sahnenin çalışan bir sürümünü telefonunuzda ve bilgisayarınızda deniyorsunuz; ölçü ve görünümle ilgili yorumlarınız sonraki haftaya yön veriyor.
04
Test ve yayın
Senior QA tasarlayıcıyı yayından önce farklı telefon ve tarayıcılarda test ediyor; 3D açılamayan cihazlarda görünecek yedek ekran da bu aşamada kontrol ediliyor.
05
Yayından sonraki 30 gün
30 gün
Bu dönemde çıkan hataları ücretsiz düzeltiyoruz; sonrasında aylık bakımla devam edebilirsiniz.

Süre ve bütçe aralıklarını web uygulaması geliştirme ve fiyatlar sayfalarımızda yayınlıyoruz; bu sayfadaki her şey aynı rakamlara dayanıyor.

Three.js hakkında sık sorulanlar

3D tasarlayıcı telefonda akıcı çalışır mı?

Bunun için birkaç önlem alıyoruz. Atölye Tasarım’da sahne yalnızca bir şey değiştiğinde yeniden çiziliyor; telefonlarda çözünürlük sınırlanıyor ve gölge efektleri baştan kapalı; bilgisayarda kare hızı düşerse efektler kendiliğinden kapanıyor. WebGL desteklemeyen tarayıcılarda ana sayfada sahnenin yerine bir fotoğraf, tasarlayıcıda ise WhatsApp’tan yazma seçeneği çıkıyor.

Arama motorları 3D sahneyi görür mü?

Sahne tarayıcıda çiziliyor, arama motoru onu okumuyor; okuması gereken de sahnenin anlattığı bilgiler. Atölye Tasarım’da sayfa metni, başlıklar ve paylaşım görselleri Next.js ile sunucuda hazırlanıyor, 3D sahne ise sayfa açıldıktan sonra yükleniyor.

Elimizdeki 3D modelleri kullanabilir misiniz?

Atölye Tasarım’da hiç hazır model dosyası yok; mobilyalar ölçülerden kodla üretiliyor, bu yüzden her ölçüye uyuyor. Ürünlerinizin 3D modelleri varsa keşif görüşmesinde dosyaların biçimine ve boyutuna birlikte bakıp hangi yolun uygun olduğuna karar veririz.

Tasarlayıcı fiyat da gösterebilir mi?

Evet. Atölye Tasarım’da seçilen modüllerden tahmini bir fiyat aralığı çıkıyor ve bağlayıcı olmadığı açıkça yazıyor. Tasarım gönderildiğinde fiyat sunucuda yeniden hesaplanıyor; tarayıcıdan gelen rakama güvenilmiyor.

Proje bitince elimde ne kalır?

Yazılımı süresiz kullanma lisansı ve dokümantasyonu. Kaynak kodun size devredilmesi ek ücretle mümkün; bu ücret teklifte ayrıca yazılır.