Wawa Sensei logo

Cos'è React Three Fiber?

Prima di iniziare a programmare, diamo un'occhiata al motivo per cui stiamo utilizzando React Three Fiber e cos'è.

WebGL

WebGL è un'API JavaScript per il rendering di grafica interattiva 2D e 3D all'interno di qualsiasi browser web compatibile senza l'uso di plug-in.

Si basa su OpenGL ES, un'API per grafica 3D di basso livello per dispositivi embedded. WebGL consente il rendering accelerato dall'hardware di grafica 2D e 3D, il che rende possibile creare visualizzazioni complesse e giochi che funzionano in modo fluido nel browser.

Ma scrivere codice WebGL direttamente è molto difficile e richiede tempo. Ed è qui che entra in gioco Three.js...

Three.js

Three.js è una libreria JavaScript che fornisce un'API semplice per creare e animare grafica 3D nel browser utilizzando WebGL.

Astrae molti dei dettagli di basso livello di WebGL, rendendo più facile creare scene 3D complesse e animazioni.

React Three Fiber

React Three Fiber è un renderer per Three.js che ti permette di usare Three.js in modo dichiarativo, simile a come usi React per costruire interfacce utente.

Potresti anche vederlo indicato come R3F.

R3F fornisce un insieme di componenti React che corrispondono agli oggetti di Three.js, come mesh, luci e telecamere, e ti consente di usare il modello di componenti di React per costruire scene 3D complesse e animazioni.

Per ottenere lo stesso risultato, il codice di React Three Fiber è molto più breve e facile da leggere rispetto al codice di Three.js.

Ecco un semplice esempio per visualizzare un cubo con entrambe le librerie:

// Three.js
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// React Three Fiber
<mesh>
  <boxGeometry />
  <meshBasicMaterial color={0x00ff00} />
</mesh>

Poimandres

Poimandres, conosciuto come pmndrs, è un collettivo di sviluppatori molto attivo, responsabile di React Three Fiber e di altre librerie molto utili come:

  • drei: una collezione di utili helper e componenti completamente funzionali per r3f
  • gltfjsx: uno strumento da riga di comando che genera componenti pronti all'uso a partire da file gltf (il formato file dei modelli 3D)
  • react-spring: una libreria di animazione basata su spring-physics
  • zustand: una soluzione di gestione di stato minimale, veloce e scalabile
  • react-xr: un set di componenti React che rendono facile la creazione di esperienze VR e AR utilizzando R3F ... e molte altre!

Nel corso useremo alcune di queste librerie.

Ti consiglio di darci un'occhiata e farlo spesso, poiché vengono costantemente aggiornate con nuove funzionalità e miglioramenti.

Alternative

Esistono altre librerie che offrono funzionalità simili per altri framework front-end, come Threlte per Svelte, TresJS per Vue e Angular Three per Angular.

Recentemente pmndrs ha anche rilasciato drei-vanilla, una versione vanilla di drei per chi desidera utilizzare i suoi componenti senza React.

< Introduction
Setup >