Yörüngeye alabileceğiniz bir Three.js nesnesi

Three.js’i Pixi.js yerine ne zaman seçeceğimi ve iş URL’sindeki canvas’ın süs değil fatura olduğunu zaten yazdım. O yazı bir karardı. Bu yazı nesne. Bu paragrafın üstündeki sahne, ürün sayfasında teslim edeceğim aynı kalıp: ada, tembel, yok edilebilir; okuduğunuz cümle belgede kalır.

Yörünge için sürükleyin. Düğümü kristal veya yüzükle değiştirin. Cam, krom, kor. Ticari iş budur: müşterinin tutabileceği bir SKU, üç açılı PNG karuseli değil. GLTF yok. 40 MB’lık kanepe yok. Yordamsal geometri, fiziksel malzeme, environment map, bütçeli bloom, görünüm alanını bırakınca duran parçacıklar.

1. Aslında neye bakıyorsunuz

Bir torus düğümü, bir ikosahedron, bir torus. Three.js bunları mesh olarak çizer. Cam, MeshPhysicalMaterial: transmission, thickness, IOR, iridescence. Krom, metalness 1 ve sıkı roughness. Kor emissive’dir — gece modu SKU’sunu ekstra ışıksız sıcak gösterme yolu. Çevresinde ShaderMaterial üzerinde bir nokta bulutu: DOM noktaları değil, parçacık kütüphanesi değil. Tek draw call.

Environment’siz cam gri bir lektir. RoomEnvironment artı PMREM, mesh’e kırılacak bir şey verir; transmission hacim okunur, bug değil. Bloom, composer üzerindeki UnrealBloomPass; açık temada ve telefonda daha zayıf. devicePixelRatio’yu sınırlarım. hardwareConcurrency düşükse parçacık sayısını keserim. Recruiter dizüstünde hayatta kalan demo ile metroda orta segment Android’i pişiren demo arasındaki fark budur.

2. Ada, anasayfa değil

Sunucuda WebGL yoktur. Bu sayfa static export. Yazının HTML’i first paint’tedir. Sahne bir istemci adasıdır: root margin’li IntersectionObserver, sonra three’nin dinamik import’u, sonra renderer. Buraya hiç kaydırmazsanız motoru indirmezsiniz. Giderseniz döngü bırakır. Unmount’ta geometrileri, malzemeleri, composer’ı, PMREM’i, renderer’ı dispose ederim. Bu uygulamada başka yazıya geçin — GPU bağlamı sonraki yazıya sızmaz.

Bunu anasayfaya koymadım. Hevesli bir 3D hero LCP ile kavga eder, sonra INP’yi çalar. Recruiter bir kaydırma bekleyebilir. Ürün URL’sindeki müşteri dokunmaya geldiği nesneyi bekleyebilir. Başlığı kilitleyen bir canvas’ı bekleyemez. Reduced motion otomatik dönüşü ve parçacık kaymasını durdurur; sürükleme kalır, çünkü bu animasyon değil seçimdir.

• Metin ve başlık sunucu HTML’inde. Canvas crawler yüzeyi değildir.
• Rota yükünde değil, intersection’da açılış.
• Unmount’ta dispose. Ekran dışındayken duraklat. prefers-reduced-motion’a uy.

3. Burada ham Three.js. Ürün uygulamasında React Three Fiber

Bu sayfada motoru kendim bağladım ki ada tek chunk kalsın ve döngü açık olsun: create, tick, dispose. Sahnenin sepet state’i, renk seçici ve stok bayrağıyla konuşması gereken bir Next.js uygulamasında React Three Fiber alırdım. Aynı GPU, React ağacında bir sahne grafı, unmount’ta daha az tuzak. Hata, bir küp döndürmek için R3F almak — veya on mesh’in Redux ile senkron kalması gerekirken ondan kaçınmak. Ürün zaten bileşenlerle düşünüyorsa sarmalayıcıyı alın.

4. Bunu bir müşteriye ne zaman teslim ederdim

Bir mücevher SKU’su. Bir şişe. Renk seçenekleri satış olan bir cihaz. Dört JPEG değil, içinde yürünmesi gereken mimari. «Premium hissettirsin» denmiş bir pazarlama anasayfası değil — o brief hâlâ CSS ve GSAP. Slot makarası değil: o Pixi. Nesne fabrikadan bir GLTF ise zayıf tutar, LOD ekler, açılana kadar poster koyarım. WebGL başlamazsa sayfada hâlâ fotoğraflar ve fiyat vardır. Canvas SKU’ya giden en iyi yoldur, asla tek yol değil.

Sonuç: nesneyi gösterin, belgeyi koruyun

Ekipler müşteri okuyarak değil yörüngeye alarak dönüştüğünde Three.js’i işe alır. Yine de bir belge işe almalıdır: başlık, fiyat, yasal metin, yedek görsel. Bu ayrımı senior web engineer olarak teslim ederim — Next.js adaları, tavanlı GPU bütçesi, sayfa hâlâ sayfayken GSAP. Brief, sekmede tutulması gereken bir SKU ise formdan nesneyi, cihaz karışımını ve aynı URL’nin sıralanıp sıralanmayacağını yazın. «Portföy patlasın diye» anasayfaya canvas atarak başlamayacağız.