De ce aș folosi Three.js și Pixi.js

O pagină de browser este un document: titluri, butoane, formulare, link-uri pe care un crawler le poate citi. CSS, GSAP și Framer Motion mută acel document. Acesta este instrumentul potrivit pentru aproape fiecare site de marketing pe care îl expediez. Three.js și Pixi.js există pentru celălalt loc de muncă: o scenă pe care o pictează GPU, nu un arbore de div-uri. Echipele ajung după ele când DOM-ul ar scăpa cadre, când obiectul este un SKU 3D sau când două mii de monede trebuie să rămână pe ecran la 60 fps.

Am scris deja când GSAP și Framer Motion își câștigă menținerea cu Figma-to-code handoff. Acesta nu este acel articol. Acesta este momentul în care aș părăsi DOM-ul, pentru ce este de fapt fiecare bibliotecă și factura pe care o plătiți în Core Web Vitals, SEO și accesibilitatea dacă puneți o pânză WebGL pe adresa URL a unei afaceri.

1. DOM-ul este un document. O pânză este o suprafață de desen

Fiecare nod DOM are aspect, stil, testare a rezultatelor și un loc în arborele de accesibilitate. Acest cost este scopul web: selectează text, filă formulare, Google indexează titlul. Acesta este, de asemenea, motivul pentru care o mie de div-uri poziționați absolut se vor atașa pe un telefon de gamă medie. O pânză este un bitmap. Spune-i lui GPU ce să deseneze acest cadru. Nu există un aspect pentru un sprite. De asemenea, nu există un titlu pentru un crawler și nici un nume pentru un cititor de ecran, cu excepția cazului în care îl construiți lângă pânză.

Raw WebGL (și acum WebGPU) sunt camere, buffere, shadere și apeluri de desen. O poți scrie. Majoritatea echipelor de produse nu ar trebui. Three.js și Pixi.js înglobează această suprafață într-un grafic al scenei, încărcătoare și un grup de angajări. Plătiți cu greutatea pachetului și o cutie neagră în mijlocul paginii. Întrebarea nu este niciodată „este GPU redat cool”. Întrebarea este dacă produsul are nevoie de fapt de o scenă.

2. Three.js: o lume 3D în filă

Three.js este un motor 3D pentru browser. Obțineți o scenă, o cameră, lumini, ochiuri, materiale și texturi. Biblioteca vorbește cu WebGL; există o redare WebGPU pentru GPU-urile mai noi. Oamenii îl folosesc pentru că un model GLTF de canapea, bucătărie sau turbină este mai ieftin de rotit în filă decât de filmat fiecare unghi și pentru că o cameră pe care o poți orbita este un instrument de vânzare mai bun decât un carusel PNG.

Lucrări tipice pe care le văd: configuratoare de produse (culoare, țesătură, suplimente), experiențe de arhitectură, date științifice sau financiare în spațiu, cabine WebXR, scene de eroi pe un site de marcă care trebuie să se simtă ca un film pe care încă îl poți atinge. Babylon.js este o alternativă reală cu un editor mai puternic. Three.js a câștigat exemplele, răspunsurile Stack Overflow și React Three Fiber - care este modul în care aș conecta o scenă într-o aplicație Next.js care gândește deja în componente.

• Folosiți Three.js când obiectul are adâncime: orbitați, explodați o piesă, schimbați un material, plimbați-vă într-o cameră.
• Păstrați GLTF slab. O canapea de 40 MB ucide mobilul. LOD, texturi comprimate și o imagine poster înainte de începerea scenei.
• Nu puneți prețul, CTA sau checkout în interiorul pânzei. HTML lângă el. Scena vinde obiectul; documentul încheie afacerea.

3. Pixi.js: 2D la 60 fps, nu un motor de joc

Pixi.js este un redator 2D. Sprites, o listă de afișare, filtre, sisteme de particule, animație scheletică în stil spin. Atrage în loturi apeluri pe GPU, astfel încât o bobină de slot, o tablă de învățare pentru copii sau o hartă cu câteva mii de ace nu topește firul principal așa cum ar face o listă DOM. Oamenii îl folosesc pentru că Canvas 2D este prea lent la acest număr și pentru că au deja o aplicație web - nu doresc să adopte un cadru complet de joc doar pentru a picta rapid.

Phaser este un cadru de joc: scene, fizică, intrare, audio. Pixi este stratul de dedesubt atunci când dețineți deja React, rutare și autentificare. Reclamele interactive, minijocuri de marcă, tablouri de bord care atrag mai multe puncte decât ar trebui SVG și interfețele de utilizare în stil cazinou sunt scurtul obișnuit. Dacă produsul este un joc real cu niveluri și o lume fizică, începeți cu un motor de joc. Dacă produsul este o aplicație Next.js care are nevoie de o etapă 2D fierbinte într-un singur traseu, Pixi este biblioteca la care aș ajunge.

• Utilizați Pixi atunci când problema este numărul și netezimea în 2D: particule, foi de sprite, filtre, o etapă care redesenează fiecare cadru.
• Atlas sprites. Zece mii de PNG-uri libere vor bloca încărcătura chiar dacă GPU este fericit mai târziu.
• Întrerupeți tickerul când fila este ascunsă. O etapă Pixi care continuă să bifeze în fundal este o plângere a bateriei care așteaptă să se întâmple.

4. Cum aleg: CSS, GSAP, Pixi, Three

Greșeala costisitoare este folosirea unui motor 3D pentru a estompa un buton. Am scris deja că povestirea cu defilare premium aparține lui GSAP și ScrollTrigger și că starea React UI aparține lui Framer Motion. Acele biblioteci animă nodurile care rămân în document. Trei și Pixi creează o lume care nu este documentul. Amestecul lor este bine. Înlocuirea stratului greșit este modul în care o pagină de destinație trimite un erou de 800 KB WebGL pe care nimeni nu i-a cerut să orbiteze.

• Hover, acordeon, tranziție de pagină, feedback de formular: CSS sau Framer Motion. Rămâi în DOM.
• Secțiuni fixate, cronologie curățată, derulare cinematografică: GSAP. Încă documentul, doar coregrafiat.
• Mii de obiecte 2D, particule, o etapă care trebuie să țină 60 fps: Pixi.js.
• Adâncime, cameră, lumini, un model pe care îl orbitezi: Three.js. Nu o bobină de slot 2D.

5. Factura: vitals, SEO, a11y, telefoane ieftine

O pânză WebGL este invizibilă pentru un crawler. Indiferent ce trebuie să citească utilizatorul - numele produsului, prețul, legalitatea, întrebări frecvente - trăiește în HTML în jurul scenei, nu pictat într-o textură. Am scris deja cum Core Web Vitals mută veniturile. Un erou 3D dornic de pe pagina principală este un autogol clasic LCP și INP: GLTF luptă cu prima vopsea, apoi bucla de randare fură intrarea. Încărcați leneș scena după ce documentul este util. Arată mai întâi un poster static. Distrugeți redarea la demontare sau scurgeți GPU prin navigațiile de pe partea clientului.

Accesibilitatea este o interfață de utilizare paralelă, nu un atribut canvas. Orbita tastaturii, o alternativă de text pentru model, mișcare redusă care oprește bucla. Un Android ieftin va accelera termic un shader de fragmente ocupat. Limitați raportul de pixeli, oferiți o alternativă „fotografii 2D” și nu faceți din singura cale către SKU un context WebGL care nu a reușit să se inițieze.

6. Next.js: insulă client, nu o componentă server

Nu există WebGL pe server. Scena este o componentă client, încărcată cu next/dynamic și ssr: false, în spatele unui poster sau a unui schelet. React Three Fiber dacă rest al aplicației este React. @pixi/react dacă scena trebuie să vorbească cu același arbore de stare. Nu aș SSR o pânză „pentru SEO”: crawler-ul încă vede un bitmap gol. Puneți copia în codul HTML redat de server. Lăsați insula să pornească atunci când utilizatorul este gata să se joace cu obiectul.

Concluzie: alegeți suprafața care se potrivește cu obiectul

Echipele folosesc Three.js deoarece un SKU 3D se vinde mai bine atunci când clientul îl poate orbita. Ei folosesc Pixi.js deoarece două mii de sprite-uri la 60 fps nu vor supraviețui ca div-uri. Niciuna dintre biblioteci nu înlocuiește CSS, GSAP sau un document rapid. Dacă brief-ul este „fă-l să se simtă premium”, încep cu mișcarea în DOM. Dacă brief-ul este „învârtiți această bucătărie” sau „ține monedele pe ecran”, las DOM-ul intenționat, izolez pânza și păstrez copia de care au nevoie Google și un cititor de ecran în HTML. Fac asta ca inginer web senior: Next.js insule, leneș WebGL, GSAP unde pagina este încă o pagină. Scrieți prin formularul cu numărul de obiecte, indiferent dacă este 2D sau 3D și dacă aceeași adresă URL trebuie să se claseze. Nu vom începe prin a arunca o pânză pe pagina principală „pentru a arăta modern”.