Warum ich Three.js und Pixi.js nutzen würde

Eine Browserseite ist ein Dokument: Überschriften, Buttons, Formulare, Links, die ein Crawler liest. CSS, GSAP und Framer Motion bewegen dieses Dokument. Das ist das richtige Werkzeug für fast jede Marketing-Site, die ich ausliefere. Three.js und Pixi.js gibt es für den anderen Job: eine Szene, die die GPU malt, kein Baum aus Divs. Teams greifen danach, wenn das DOM Frames verliert, wenn das Objekt eine 3D-SKU ist, oder wenn zweitausend Münzen bei 60 fps auf dem Schirm bleiben müssen.

Ich habe schon geschrieben, wann GSAP und Framer Motion sich bei einem Figma-to-Code-Handoff lohnen. Das ist nicht dieser Artikel. Hier geht es darum, wann ich das DOM verlasse, wofür jede Library wirklich da ist, und welche Rechnung Sie in Core Web Vitals, SEO und Barrierefreiheit zahlen, wenn ein WebGL-Canvas auf einer Business-URL landet.

1. Das DOM ist ein Dokument. Ein Canvas ist eine Zeichenfläche

Jeder DOM-Knoten trägt Layout, Stil, Hit-Testing und einen Platz im Accessibility-Tree. Diese Kosten sind der Sinn des Web: Text lässt sich markieren, Formulare tabben, Google indexiert die Überschrift. Deshalb ruckeln tausend absolut positionierte Divs auf einem Mittelklasse-Handy. Ein Canvas ist ein Bitmap. Sie sagen der GPU, was in diesem Frame zu zeichnen ist. Ein Sprite hat kein Layout. Es hat auch keine Überschrift für den Crawler und keinen Namen für den Screenreader, außer Sie bauen das neben dem Canvas.

Rohes WebGL (und jetzt WebGPU) sind Kameras, Buffer, Shader und Draw Calls. Sie können das schreiben. Die meisten Produktteams sollten es nicht. Three.js und Pixi.js packen diese Fläche in einen Szenengraphen, Loader und einen Hiring-Pool. Sie zahlen mit Bundle-Gewicht und einer Blackbox in der Seitenmitte. Die Frage ist nie „ist GPU-Rendering cool“. Die Frage ist, ob das Produkt wirklich eine Szene braucht.

2. Three.js: eine 3D-Welt im Tab

Three.js ist eine 3D-Engine für den Browser. Sie bekommen Szene, Kamera, Licht, Meshes, Materialien und Texturen. Die Library spricht WebGL; für neuere GPUs gibt es einen WebGPU-Renderer. Man nutzt sie, weil ein GLTF-Modell eines Sofas, einer Küche oder einer Turbine günstiger im Tab zu drehen ist als jeden Winkel zu filmen - und weil eine Kamera, die man umkreisen kann, besser verkauft als ein PNG-Karussell.

Typische Arbeit, die ich sehe: Produktkonfiguratoren (Farbe, Stoff, Add-ons), Architektur-Walkthroughs, wissenschaftliche oder finanzielle Daten im Raum, WebXR-Stände, Hero-Szenen auf einer Brand-Site, die sich anfühlen sollen wie ein Filmstill, den man berühren kann. Babylon.js ist eine echte Alternative mit stärkerem Editor. Three.js hat die Beispiele, die Stack-Overflow-Antworten und React Three Fiber gewonnen - so würde ich eine Szene in eine Next.js-App hängen, die schon in Komponenten denkt.

• Three.js, wenn das Objekt Tiefe hat: umkreisen, ein Teil explodieren, Material tauschen, einen Raum begehen.
• Halten Sie das GLTF schlank. Ein 40-MB-Sofa tötet Mobile. LOD, komprimierte Texturen und ein Posterbild, bis die Szene startet.
• Legen Sie Preis, CTA und Kasse nicht ins Canvas. HTML daneben. Die Szene verkauft das Objekt; das Dokument schließt den Deal.

3. Pixi.js: 2D bei 60 fps, keine Game-Engine

Pixi.js ist ein 2D-Renderer. Sprites, Display-Liste, Filter, Partikelsysteme, skelettale Animation im Spine-Stil. Es bündelt Draw Calls auf der GPU, damit eine Slot-Walze, ein Lernboard für Kinder oder eine Karte mit ein paar tausend Pins den Main Thread nicht so schmilzt wie eine DOM-Liste. Man nutzt es, weil Canvas 2D bei dieser Anzahl zu langsam ist - und weil die Web-App schon da ist. Niemand will nur zum schnellen Zeichnen ein ganzes Game-Framework übernehmen.

Phaser ist ein Game-Framework: Szenen, Physik, Input, Audio. Pixi ist die Schicht darunter, wenn React, Routing und Auth schon Ihnen gehören. Interaktive Ads, Branded Minigames, Dashboards mit mehr Punkten als SVG tragen sollte, und UIs im Casino-Stil sind der übliche Brief. Ist das Produkt ein echtes Spiel mit Leveln und einer Physikwelt, starten Sie mit einer Game-Engine. Ist das Produkt eine Next.js-App, die auf einer Route eine heiße 2D-Bühne braucht, ist Pixi die Library, nach der ich greifen würde.

• Pixi, wenn das Problem Anzahl und Glätte in 2D ist: Partikel, Sprite Sheets, Filter, eine Bühne, die jeden Frame neu zeichnet.
• Packen Sie Sprites in ein Atlas. Zehntausend lose PNGs stoppen den Load, auch wenn die GPU danach zufrieden ist.
• Pausieren Sie den Ticker, wenn der Tab versteckt ist. Eine Pixi-Bühne, die im Hintergrund weitertickt, ist eine Akkubeschwerde, die noch kommt.

4. Wie ich wähle: CSS, GSAP, Pixi, Three

Der teure Fehler ist, eine 3D-Engine zu nutzen, um einen Button auszublenden. Ich habe schon geschrieben: Premium-Scroll-Storytelling gehört GSAP und ScrollTrigger, React-UI-State gehört Framer Motion. Diese Libraries animieren Knoten, die im Dokument bleiben. Three und Pixi erzeugen eine Welt, die nicht das Dokument ist. Mischen geht. Die falsche Schicht ersetzen - so liefert eine Landing ein 800-KB-WebGL-Hero, den niemand umkreisen wollte.

• Hover, Akkordeon, Seitenübergang, Formular-Feedback: CSS oder Framer Motion. Bleiben Sie im DOM.
• Gepinnte Sektionen, gescrubbte Timeline, cineastischer Scroll: GSAP. Immer noch das Dokument, nur choreografiert.
• Tausende 2D-Objekte, Partikel, eine Bühne, die 60 fps halten muss: Pixi.js.
• Tiefe, Kamera, Licht, ein Modell zum Umkreisen: Three.js. Keine 2D-Slot-Walze.

5. Die Rechnung: Vitals, SEO, a11y, günstige Handys

Ein WebGL-Canvas ist für den Crawler unsichtbar. Was der Nutzer lesen muss - Produktname, Preis, Rechtstexte, FAQ - lebt im HTML um die Bühne, nicht in eine Textur gemalt. Ich habe schon geschrieben, wie Core Web Vitals Umsatz bewegen. Ein eifriger 3D-Hero auf der Homepage ist ein klassisches Eigentor bei LCP und INP: das GLTF kämpft mit dem First Paint, dann stiehlt die Render-Schleife Input. Lazy-loaden Sie die Szene, wenn das Dokument schon nützlich ist. Zuerst ein statisches Poster. Zerstören Sie den Renderer beim Unmount, sonst leckt die GPU über clientseitige Navigations.

Barrierefreiheit ist eine parallele UI, kein Canvas-Attribut. Orbit per Tastatur, eine Textalternative für das Modell, reduced-motion, das die Schleife stoppt. Ein billiges Android drosselt einen beschäftigten Fragment-Shader thermisch. Pixel Ratio deckeln, einen Fallback „2D-Fotos“ anbieten, und den einzigen Weg zur SKU nicht zu einem WebGL-Kontext machen, der nicht startet.

6. Next.js: Client-Insel, keine Server Component

Auf dem Server gibt es kein WebGL. Die Szene ist eine Client Component, geladen mit next/dynamic und ssr: false, hinter einem Poster oder Skeleton. React Three Fiber, wenn der Rest der App React ist. @pixi/react, wenn die Bühne denselben State-Tree sprechen muss. Ich würde ein Canvas nicht „für SEO“ SSR-en: der Crawler sieht trotzdem ein leeres Bitmap. Den Text ins serverseitig gerenderte HTML. Die Insel darf booten, wenn der Nutzer am Objekt drehen will.

Fazit: wählen Sie die Fläche, die zum Objekt passt

Teams nutzen Three.js, weil eine 3D-SKU besser verkauft, wenn der Kunde sie umkreisen kann. Sie nutzen Pixi.js, weil zweitausend Sprites bei 60 fps als Divs nicht überleben. Keine der Libraries ersetzt CSS, GSAP oder ein schnelles Dokument. Ist der Brief „soll sich premium anfühlen“, starte ich mit Bewegung im DOM. Ist der Brief „drehen Sie diese Küche“ oder „halten Sie die Münzen auf dem Schirm“, verlasse ich das DOM absichtlich, isoliere das Canvas und lasse den Text, den Google und ein Screenreader brauchen, im HTML. Ich mache das als Senior Web Engineer: Next.js-Inseln, faules WebGL, GSAP dort, wo die Seite noch eine Seite ist. Schreiben Sie über das Formular die Objektanzahl, ob 2D oder 3D, und ob dieselbe URL ranken muss. Wir fangen nicht damit an, ein Canvas auf die Homepage zu werfen, „damit es modern aussieht“.