Objekt Three.js, který můžete obíhat

Už jsem psal, kdy bych zvolil Three.js přes Pixi.js a proč je plátno na firemní URL účtenka, ne dekorace. Ten kousek bylo rozhodnutí. Tohle je ten objekt. Scéna nad tímto odstavcem je stejný vzor, ​​jaký bych poslal pro stránku produktu: ostrov, líný, na jedno použití, s větou, kterou čtete, stále v dokumentu.

Přetáhněte na oběžnou dráhu. Vyměňte uzel za krystal nebo prsten. Sklo, chrom, uhlík. To je komerční práce: SKU, kterou může zákazník držet, ne PNG karusel se stejnými třemi úhly. Žádné stahování GLTF. Žádná pohovka 40 MB. Procedurální geometrie, fyzický materiál, mapa prostředí, kvetení s omezeným rozpočtem, částice, které se zastaví, když opustíte výřez.

1. Na co se vlastně díváte

Torusový uzel, dvacetistěn, torus. Three.js je kreslí jako sítě. Povrchová úprava skla je MeshPhysicalMaterial: prostup, tloušťka, IOR, iridescence. Chrom je kovovost 1 a těsná drsnost. Ember je emisní, levný způsob, jak rozpálit SKU v nočním režimu bez dalšího světla. Kolem toho mračno bodů na ShaderMaterial – ne tečky DOM, ne knihovna částic. Jeden draw call.

Sklo bez prostředí je šedá skvrna. RoomEnvironment plus PMREM poskytuje pletivu něco, co se láme, takže přenos se čte jako objem, nikoli jako chyba. Bloom je na skladatele UnrealBloomPass, slabší na světlé téma, slabší na telefon. I cap devicePixelRatio. Když je hardwareConcurrency nízký, snížím počet částic. To je rozdíl mezi ukázkou, která přežije notebook náboráře, a ukázkou, která vaří v metru Android střední třídy.

2. Ostrov, ne domovská stránka

Na serveru není WebGL. Tato stránka je statický export. HTML článku je v první malbě. Scéna je klientský ostrov: IntersectionObserver s kořenovým okrajem, pak dynamický import tří, pak renderer. Pokud se zde nikdy neposouváte, nikdy si nestáhnete engine. Pokud odejdete, smyčka povolí. Na unmountu disponuji geometriemi, materiály, skladatelem, PMREM, rendererem. Opusťte tuto aplikaci a kontext GPU nepronikne do dalšího článku.

Na úvodní stránku jsem to nedal. Dychtivý 3D hrdina bojuje s LCP a poté krade INP. Náboráři mohou čekat jeden svitek. Zákazníci na URL produktu mohou čekat na objekt, kterého se přišli dotknout. Nemohou čekat na plátno, které zablokovalo směr. Snížený pohyb zastaví automatické otáčení a drift částic; drag stále funguje, protože to je volba, ne animace.

• Kopírování a záhlaví v HTML serveru. Canvas není prolézací povrch.
• Start na křižovatce, ne na zatížení trasy.
• Zlikvidujte při odpojení. Pozastavit mimo obrazovku. Honor preferuje-redukovaný-pohyb.

3. Raw Three.js zde. React Three Fiber v aplikaci produktu

Sám jsem na této stránce propojil motor, takže ostrov zůstane jeden kus a smyčka je zřejmá: vytvořit, zaškrtnout, zlikvidovat. V aplikaci Next.js, kde musí scéna komunikovat se stavem košíku, výběrem barvy a vlajkou akcií, bych použil React Three Fiber. Stejný GPU, graf scény, který žije ve stromě React, méně šlapáků kolem unmount. Chybou je použití R3F pro roztočení kostky nebo vyhnutí se tomu, když deset ok musí zůstat synchronizovaných s Redux. Vyberte obal, když produkt již obsahuje komponenty.

4. Kdy bych to poslal klientovi

SKU šperků. Láhev. Zařízení, jehož barevné provedení je na prodej. Architektura, kterou se musí chodit, ne fotit ze čtyř JPEGů. Nejedná se o marketingovou domovskou stránku, která by potřebovala „pocit prémie“ – tím briefem je stále CSS a GSAP. Není to automat: to je Pixi. Pokud je objekt GLTF z továrny, nechám ho štíhlý, přidám LOD a vyvěsím plakát, zatímco nabíhá. Pokud se WebGL nepodaří inicializovat, stránka stále obsahuje fotografie a cenu. Plátno je nejlepší cesta ke SKU, nikdy není jediná.

Závěr: ukažte předmět, uschovejte dokument

Týmy najímají Three.js, když zákazník konvertuje obíháním, nikoli čtením. Stále by si měli najmout dokument: název, cena, právní, záložní obrázek. Odesílám toto rozdělení jako hlavní webový inženýr – Next.js ostrovů, omezený GPU rozpočet, GSAP kde je stránka stále stránkou. Pokud je váš brief SKU, který musí být uložen na kartě, napište prostřednictvím formuláře s objektem, mixem zařízení a zda musí být hodnocena stejná adresa URL. Nezačneme tím, že na domovskou stránku pustíme plátno, „aby portfolio vyskočilo“.