Un obiect Three.js pe care îl puteți orbita

Am scris deja când aș alege Three.js peste Pixi.js și de ce o pânză pe adresa URL a unei afaceri este o factură, nu un decor. Piesa aceea a fost o decizie. Acesta este obiectul. Scena de deasupra acestui paragraf este același model pe care l-aș expedia pentru o pagină de produs: o insulă, leneșă, de unică folosință, cu propoziția pe care o citiți încă în document.

Trageți pe orbită. Schimbați nodul pentru un cristal sau un inel. Sticlă, crom, jar. Aceasta este treaba comercială: un SKU pe care clientul îl poate deține, nu un carusel PNG cu aceleași trei unghiuri. Fără descărcare GLTF. Nu canapea 40 MB. Geometrie procedurală, un material fizic, o hartă a mediului, înflorire la buget, particule care se opresc când părăsești fereastra.

1. La ce te uiți de fapt

Un nod torus, un icosaedru, un torus. Three.js le desenează ca ochiuri. Finisajul sticlei este MeshPhysicalMaterial: transmisie, grosime, IOR, irizare. Cromul este metalitatea 1 și o rugozitate strânsă. Ember este emisiv, modalitatea ieftină de a face ca un SKU în modul noapte să se simtă fierbinte fără altă lumină. În jurul lui, un nor de puncte pe un ShaderMaterial – nu puncte DOM, nu o bibliotecă de particule. Un apel la egalitate.

Sticla fără mediu este o pată gri. RoomEnvironment plus PMREM oferă refracției rețelei, astfel încât transmisia să se citească ca volum, nu ca un bug. Bloom este UnrealBloomPass pe un compozitor, mai slab în tema luminii, mai slab pe un telefon. Limitez dispozitivulPixelRatio. Renunț la numărul de particule când hardwareConcurrency este scăzut. Aceasta este diferența dintre un demo care supraviețuiește laptopului unui recrutor și unul care gătește un Android de gamă medie în metrou.

2. Insula, nu pagina de pornire

Nu există WebGL pe server. Această pagină este un export static. Articolul HTML este în prima vopsea. Scena este o insulă client: IntersectionObserver cu o marjă rădăcină, apoi un import dinamic de trei, apoi un randament. Dacă nu derulați niciodată aici, nu descărcați niciodată motorul. Dacă pleci, bucla cedează. La demontat dispun geometriile, materialele, compozitorul, PMREM-ul, rendererul. Navigați în această aplicație și contextul GPU nu se scurge în articolul următor.

Nu am pus asta pe pagina de start. Un erou 3D dornic luptă cu LCP și apoi fură INP. Recruitorii pot aștepta un pergament. Clienții de pe adresa URL a unui produs pot aștepta obiectul pe care au ajuns să-l atingă. Ei abia așteaptă o pânză care a blocat titlul. Mișcarea redusă oprește rotirea automată și deplasarea particulelor; glisarea funcționează în continuare, deoarece aceasta este o alegere, nu o animație.

• Copiați și titlul în serverul HTML. Pânza nu este o suprafață cu șenile.
• Porniți la intersecție, nu la încărcarea rutei.
• Aruncați la demontare. Întrerupeți în afara ecranului. Onoarea preferă-mișcare redusă.

3. Raw Three.js aici. React Trei fibre într-o aplicație de produs

Am conectat singur motorul pe această pagină, astfel încât insula să rămână o bucată și bucla este evidentă: creați, bifați, eliminați. Într-o aplicație Next.js în care scena trebuie să vorbească cu starea căruciorului, un selector de culori și un steag de stoc, aș folosi React Three Fiber. Același GPU, un grafic al scenei care trăiește în arborele React, mai puține pistoale în jurul demontate. Greșeala este adoptarea R3F pentru a roti un cub sau evitarea acestuia atunci când zece rețele trebuie să rămână sincronizate cu Redux. Alegeți ambalajul atunci când produsul se gândește deja la componente.

4. Când aș expedia asta pentru un client

Un SKU de bijuterii. O sticlă. Un dispozitiv ale cărui culori sunt de vânzare. Arhitectură care trebuie parcursă, nu fotografiată din patru JPEG. Nu o pagină de pornire de marketing care avea nevoie de „să se simtă premium” – acel brief este încă CSS și GSAP. Nu o bobină de slot: acesta este Pixi. Dacă obiectul este un GLTF din fabrică, îl mențin slab, adaug LOD și pun un poster în timp ce pornește. Dacă WebGL nu se inițiază, pagina are în continuare fotografii și un preț. Pânza este cea mai bună cale către SKU, niciodată singura.

Concluzie: arată obiectul, păstrează documentul

Echipele angajează Three.js atunci când un client efectuează conversia prin orbită, nu prin citire. Ar trebui să angajeze în continuare un document: titlu, preț, legal, o imagine de rezervă. Trimit această diviziune ca inginer web senior – Next.js insule, un buget limitat de GPU, GSAP unde pagina este încă o pagină. Dacă brief-ul dvs. este un SKU care trebuie să fie păstrat în filă, scrieți prin formularul cu obiectul, mixul dispozitivului și dacă aceeași adresă URL trebuie să se claseze. Nu vom începe prin a arunca o pânză pe pagina de pornire „astfel încât portofoliul să apară”.