Ein Three.js-Objekt, das Sie umkreisen können

Ich habe schon geschrieben, wann ich Three.js statt Pixi.js nehmen würde, und warum ein Canvas auf einer Business-URL eine Rechnung ist, keine Deko. Das war eine Entscheidung. Hier ist das Objekt. Die Szene über diesem Absatz ist dasselbe Muster, das ich für eine Produktseite liefern würde: eine Insel, faul, entsorgbar, und der Satz, den Sie lesen, bleibt im Dokument.

Ziehen zum Orbit. Tauschen Sie den Knoten gegen einen Kristall oder einen Ring. Glas, Chrom, Glut. Das ist der kommerzielle Job: eine SKU, die der Kunde halten kann, kein PNG-Karussell aus drei Winkeln. Kein GLTF. Kein 40-MB-Sofa. Prozedurale Geometrie, ein physikalisches Material, eine Environment Map, Bloom im Budget, Partikel, die stoppen, sobald Sie den Viewport verlassen.

1. Was Sie wirklich sehen

Ein Torusknoten, ein Ikosaeder, ein Torus. Three.js zeichnet sie als Meshes. Das Glas-Finish ist MeshPhysicalMaterial: Transmission, Thickness, IOR, Iridescence. Chrom ist Metalness 1 und enge Roughness. Glut ist emissive — der billige Weg, eine Night-Mode-SKU heiß wirken zu lassen, ohne ein weiteres Licht. Darum eine Punktwolke auf ShaderMaterial: keine DOM-Punkte, keine Particle-Library. Ein Draw Call.

Glas ohne Environment ist ein grauer Klumpen. RoomEnvironment plus PMREM gibt dem Mesh etwas zum Brechen, damit Transmission als Volumen lesbar ist, nicht als Bug. Bloom ist UnrealBloomPass auf einem Composer, schwächer im Light Theme, schwächer auf dem Handy. Ich deckle devicePixelRatio. Ich senke die Partikelzahl, wenn hardwareConcurrency niedrig ist. Das ist der Unterschied zwischen einer Demo, die auf dem Recruiter-Laptop überlebt, und einer, die ein Mittelklasse-Android in der Bahn kocht.

2. Die Insel, nicht die Homepage

Auf dem Server gibt es kein WebGL. Diese Seite ist ein Static Export. Das Artikel-HTML ist im First Paint. Die Szene ist eine Client-Insel: IntersectionObserver mit Root Margin, dann ein Dynamic Import von three, dann ein Renderer. Scrollen Sie nie hierher, laden Sie die Engine nie. Gehen Sie weg, gibt die Schleife nach. Beim Unmount dispose ich Geometrien, Materialien, Composer, PMREM, Renderer. Navigieren Sie in dieser App weg — der GPU-Kontext leckt nicht in den nächsten Artikel.

Ich habe das nicht auf die Homepage gesetzt. Ein eifriger 3D-Hero kämpft mit LCP und stiehlt dann INP. Recruiter können einen Scroll warten. Kunden auf einer Produkt-URL können auf das Objekt warten, das sie anfassen wollten. Sie können nicht auf ein Canvas warten, das die Überschrift blockiert hat. Reduced motion stoppt Auto-Rotate und Partikeldrift; Drag bleibt, weil das eine Wahl ist, keine Animation.

• Text und Überschrift im Server-HTML. Canvas ist keine Crawler-Fläche.
• Start bei Intersection, nicht beim Route-Load.
• Dispose beim Unmount. Pause außerhalb des Screens. prefers-reduced-motion achten.

3. Hier rohes Three.js. In der Produkt-App React Three Fiber

Auf dieser Seite habe ich die Engine selbst verdrahtet, damit die Insel ein Chunk bleibt und die Schleife klar ist: create, tick, dispose. In einer Next.js-App, in der die Szene mit Cart-State, Color Picker und Stock-Flag sprechen muss, würde ich React Three Fiber nehmen. Dieselbe GPU, ein Szenengraph im React-Tree, weniger Fußangeln beim Unmount. Der Fehler ist, R3F für einen Würfel zu holen — oder es zu meiden, wenn zehn Meshes mit Redux synchron bleiben müssen. Den Wrapper nehmen, wenn das Produkt schon in Komponenten denkt.

4. Wann ich das für einen Kunden liefern würde

Eine Schmuck-SKU. Eine Flasche. Ein Gerät, dessen Farben der Sale sind. Architektur, die man begehen muss, nicht vier JPEGs. Keine Marketing-Homepage, die sich „premium anfühlen“ sollte — der Brief ist weiter CSS und GSAP. Kein Slot: das ist Pixi. Ist das Objekt ein GLTF aus der Fabrik, halte ich es schlank, setze LOD und ein Poster, bis es bootet. Startet WebGL nicht, hat die Seite weiter Fotos und einen Preis. Das Canvas ist der beste Weg zur SKU, nie der einzige.

Fazit: zeigen Sie das Objekt, behalten Sie das Dokument

Teams holen Three.js, wenn der Kunde durch Orbit konvertiert, nicht durch Lesen. Sie sollten trotzdem ein Dokument holen: Titel, Preis, Rechtstexte, ein Fallback-Bild. Ich liefere diese Trennung als Senior Web Engineer — Next.js-Inseln, gedeckeltes GPU-Budget, GSAP dort, wo die Seite noch eine Seite ist. Ist der Brief eine SKU, die man im Tab halten muss, schreiben Sie über das Formular das Objekt, den Device-Mix und ob dieselbe URL ranken muss. Wir fangen nicht damit an, ein Canvas auf die Homepage zu werfen, „damit das Portfolio knallt.“