Three.js

Què és Three.js?

Three.js és una biblioteca de JavaScript per renderitzar gràfics 3D al navegador. Es recolza sobre WebGL, la interfície de baix nivell que permet a una pàgina web parlar amb la targeta gràfica. WebGL per si sol és verbós i implacable. Three.js l'embolcalla en conceptes sobre els quals un desenvolupador pot raonar: escenes, càmeres, llums, malles, materials.

El resultat corre en qualsevol navegador modern sense plugin ni instal·lació. Apuntes una càmera a una escena, hi afegeixes objectes i il·luminació, i Three.js s'encarrega de les matemàtiques que ho converteixen en píxels a seixanta fotogrames per segon. Un configurador de producte on un comprador gira una sabatilla, en canvia el color i veu com la llum juga sobre el material en temps real és un cas de manual de Three.js. Corre en un mòbil o un portàtil directament des d'una URL.

És una biblioteca de renderitzat, no un motor de joc. No porta física integrada, ni editor de nivells, ni pipeline d'assets de sèrie. Per al 3D interactiu al web obert, però, és l'opció més assentada que existeix, i la majoria d'experiències 3D al navegador que has vist es van construir sobre ell.

Three.js a Dallonses

Quan un projecte necessita 3D de debò al navegador, Three.js és la nostra ruta habitual. Configuradors de producte, instal·lacions interactives, dades cobrant vida en tres dimensions. L'hem fet servir en feina de desenvolupament web on una interfície plana no transmetia la idea i una app nativa hauria estat el lloc equivocat per posar-la.

El rendiment és on aquests projectes viuen o moren, així que és on ens centrem. Una escena 3D que perd fotogrames o fon la bateria d'un mòbil no mereix llançar-se. Construïm tenint en ment el pressupost del dispositiu des del principi, provem en hardware real i afinem fins que va fluid per a les persones que de debò l'usaran.

Tens una idea que necessita 3D de debò al navegador? Vegem què podem construir.

Parlem de web