Un oggetto Three.js che potete orbitare

Ho già scritto quando prenderei Three.js al posto di Pixi.js, e perché un canvas su un URL business è un conto, non un decoro. Quello era una decisione. Questo è l’oggetto. La scena sopra questo paragrafo è lo stesso schema che consegnerei su una pagina prodotto: un’isola, pigra, distruttibile, e la frase che state leggendo resta nel documento.

Trascinate per orbitare. Cambiate il nodo con un cristallo o un anello. Vetro, cromo, brace. Questo è il lavoro commerciale: uno SKU che il cliente può tenere, non un carousel di PNG con tre angoli. Niente GLTF. Niente divano da 40 MB. Geometria procedurale, materiale fisico, environment map, bloom nel budget, particelle che si fermano quando lasciate il viewport.

1. Cosa state guardando davvero

Un nodo toroidale, un icosaedro, un toro. Three.js li disegna come mesh. Il vetro è MeshPhysicalMaterial: transmission, thickness, IOR, iridescence. Il cromo è metalness 1 e una roughness stretta. La brace è emissive: il modo economico per far sentire caldo uno SKU in night mode senza un’altra luce. Intorno, una nuvola di punti su ShaderMaterial: non punti DOM, non una libreria di particelle. Un draw call.

Il vetro senza environment è una macchia grigia. RoomEnvironment più PMREM dà alla mesh qualcosa da rifrangere, così la transmission si legge come volume, non come bug. Il bloom è UnrealBloomPass su un composer, più debole in tema chiaro, più debole sul telefono. Tappo devicePixelRatio. Taglio il numero di particelle quando hardwareConcurrency è basso. Questa è la differenza tra una demo che sopravvive al laptop di un recruiter e una che cuoce un Android di fascia media in metro.

2. L’isola, non la home

Sul server non c’è WebGL. Questa pagina è uno static export. L’HTML dell’articolo è nel first paint. La scena è un’isola client: IntersectionObserver con root margin, poi un import dinamico di three, poi un renderer. Se non scrollate mai qui, non scaricate il motore. Se ve ne andate, il loop cede. All’unmount faccio dispose di geometrie, materiali, composer, PMREM, renderer. Navigate via in questa app e il contesto GPU non perde nel prossimo articolo.

Non l’ho messo in home. Un hero 3D impaziente lotta col LCP e poi ruba l’INP. Un recruiter può aspettare uno scroll. Un cliente sull’URL prodotto può aspettare l’oggetto che è venuto a toccare. Non può aspettare un canvas che ha bloccato il titolo. Reduced motion ferma l’auto-rotate e la deriva delle particelle; il drag resta, perché è una scelta, non un’animazione.

• Testo e titolo nell’HTML server. Il canvas non è una superficie per il crawler.
• Avvio all’intersection, non al load della route.
• Dispose all’unmount. Pausa fuori schermo. Onorare prefers-reduced-motion.

3. Qui Three.js crudo. Nell’app prodotto, React Three Fiber

In questa pagina ho cablato il motore io, così l’isola resta un chunk e il loop è ovvio: create, tick, dispose. In un’app Next.js dove la scena deve parlare con lo state del carrello, un color picker e un flag di stock, prenderei React Three Fiber. Stessa GPU, un grafo di scena nell’albero React, meno trappole all’unmount. L’errore è adottare R3F per far girare un cubo, o evitarlo quando dieci mesh devono restare in sync con Redux. Prendete il wrapper quando il prodotto pensa già in componenti.

4. Quando lo consegnerei a un cliente

Uno SKU di gioielleria. Una bottiglia. Un device i cui colori sono la vendita. Architettura da percorrere, non quattro JPEG. Non una home marketing che doveva «sentirsi premium» — quel brief è ancora CSS e GSAP. Non un rullo di slot: quello è Pixi. Se l’oggetto è un GLTF dalla fabbrica, lo tengo magro, aggiungo LOD e un poster finché non parte. Se WebGL non parte, la pagina ha ancora foto e un prezzo. Il canvas è il percorso migliore verso lo SKU, mai l’unico.

Conclusione: mostrate l’oggetto, tenete il documento

I team prendono Three.js quando il cliente converte orbitando, non leggendo. Devono comunque prendere un documento: titolo, prezzo, legale, un’immagine di fallback. Consegno questa spaccatura da senior web engineer — isole Next.js, budget GPU tappato, GSAP dove la pagina è ancora una pagina. Se il brief è uno SKU da tenere nella scheda, scrivete dal form l’oggetto, il mix di device e se lo stesso URL deve posizionarsi. Non partiremo buttando un canvas in home «perché il portfolio scoppi».