Un objet Three.js que vous pouvez orbiter

J’ai déjà écrit quand je prendrais Three.js plutôt que Pixi.js, et pourquoi un canvas sur une URL métier est une facture, pas un décor. C’était une décision. Ici, c’est l’objet. La scène au-dessus de ce paragraphe est le même schéma que je livrerais sur une page produit : une île, paresseuse, destructible, et la phrase que vous lisez reste dans le document.

Glissez pour orbiter. Échangez le nœud contre un cristal ou un anneau. Verre, chrome, braise. C’est le job commercial : un SKU que le client peut tenir, pas un carrousel de PNG sous trois angles. Pas de GLTF. Pas de canapé de 40 Mo. Géométrie procédurale, matériau physique, environment map, bloom dans le budget, particules qui s’arrêtent dès que vous quittez le viewport.

1. Ce que vous regardez vraiment

Un nœud de tore, un icosaèdre, un tore. Three.js les dessine en meshes. La finition verre est MeshPhysicalMaterial : transmission, thickness, IOR, iridescence. Le chrome, metalness 1 et une roughness serrée. La braise est emissive — le moyen bon marché de rendre un SKU night-mode chaud sans une lumière de plus. Autour, un nuage de points en ShaderMaterial : pas des points DOM, pas une lib de particules. Un draw call.

Le verre sans environment est une tache grise. RoomEnvironment plus PMREM donne au mesh de quoi réfracter, pour que la transmission se lise comme un volume, pas comme un bug. Le bloom est UnrealBloomPass sur un composer, plus faible en thème clair, plus faible sur téléphone. Je plafonne devicePixelRatio. Je coupe le nombre de particules quand hardwareConcurrency est bas. C’est la différence entre une démo qui survit au laptop d’un recruteur et une qui fait cuire un Android milieu de gamme dans le métro.

2. L’île, pas la home

Il n’y a pas de WebGL sur le serveur. Cette page est un static export. Le HTML de l’article est dans le first paint. La scène est une île client : IntersectionObserver avec root margin, puis un import dynamique de three, puis un renderer. Si vous ne scrollez jamais ici, vous ne téléchargez jamais le moteur. Si vous partez, la boucle cède. Au unmount je dispose géométries, matériaux, composer, PMREM, renderer. Naviguez ailleurs dans cette app : le contexte GPU ne fuit pas dans l’article suivant.

Je n’ai pas mis ça sur la home. Un hero 3D impatient se bat avec le LCP puis vole l’INP. Un recruteur peut attendre un scroll. Un client sur une URL produit peut attendre l’objet qu’il est venu toucher. Il ne peut pas attendre un canvas qui a bloqué le titre. Reduced motion arrête l’auto-rotate et la dérive des particules ; le drag reste, parce que c’est un choix, pas une animation.

• Texte et titre dans le HTML serveur. Le canvas n’est pas une surface crawler.
• Démarrage à l’intersection, pas au chargement de la route.
• Dispose au unmount. Pause hors écran. Respecter prefers-reduced-motion.

3. Ici du Three.js brut. Dans l’app produit, React Three Fiber

Sur cette page j’ai branché le moteur moi-même pour que l’île reste un chunk et que la boucle soit évidente : create, tick, dispose. Dans une app Next.js où la scène doit parler à l’état panier, un color picker et un flag stock, je prendrais React Three Fiber. Même GPU, un graphe de scène dans l’arbre React, moins de pièges au unmount. L’erreur, c’est d’adopter R3F pour faire tourner un cube, ou de l’éviter quand dix meshes doivent rester sync avec Redux. Prenez le wrapper quand le produit pense déjà en composants.

4. Quand je livrerais ça pour un client

Un SKU bijou. Une bouteille. Un appareil dont les coloris sont la vente. De l’architecture à parcourir, pas quatre JPEG. Pas une home marketing qui devait « faire premium » — ce brief reste CSS et GSAP. Pas un rouleau de slot : c’est Pixi. Si l’objet est un GLTF d’usine, je le garde maigre, j’ajoute du LOD et un poster le temps du boot. Si WebGL ne démarre pas, la page a encore des photos et un prix. Le canvas est le meilleur chemin vers le SKU, jamais le seul.

Conclusion : montrez l’objet, gardez le document

Les équipes prennent Three.js quand le client convertit en orbitant, pas en lisant. Elles doivent quand même prendre un document : titre, prix, mentions, une image de repli. Je livre cette coupure en ingénieure web senior — îles Next.js, budget GPU plafonné, GSAP là où la page est encore une page. Si le brief est un SKU à tenir dans l’onglet, écrivez via le formulaire l’objet, le mix d’appareils, et si la même URL doit se classer. On ne commencera pas en posant un canvas sur la home « pour que le portfolio claque ».