Three.js in React con React-Three-Fiber

C'è stato un tempo in cui il rendering della computer grafica 3D animata si basava sulla presenza di plug-in del browser proprietari, che un utente avrebbe dovuto installare per modificare il proprio browser. All'inizio degli anni 2000, un'API JavaScript chiamata WebGL (Web Graphics Library) è arrivata per risolvere questo problema; consente il rendering di grafica 2D e 3D all'interno di qualsiasi browser Web compatibile, senza l'uso di plug-in esterni.

WebGL consente alla nostra prossima tecnologia di esistere: Three.js. Three.js è una libreria e un'API JavaScript di alto livello che viene, ancora una volta, utilizzata per visualizzare grafica 3D animata in un browser Web, senza l'uso di estensioni del browser. La libreria Three.js è ampia e include funzioni utili come Geometry, Lights, Shader e alcune animazioni.

Quando è arrivato il momento di imparare una nuova tecnologia da solo, come ultima valutazione delle abilità durante il mio periodo come studente di ingegneria del software, sapevo che volevo fare qualcosa di artistico e creativo. L'uso del codice per generare animazioni nel browser è stata una scelta immediata e ovvia per me e ho iniziato a sfogliare le tecnologie che potevo utilizzare insieme al mio linguaggio preferito: React. Quando ho imparato di più su Three.js, ho scoperto che esiste già una libreria specifica per l'integrazione con React. La libreria si chiama React-Three-Fiber e può essere utilizzata per costruire la scena in modo dichiarativo con componenti riutilizzabili e autonomi che reagiscono allo stato e non richiedono alcun trattamento speciale per funzionare con l'ecosistema di React.

Per iniziare a utilizzare React-Three-Fiber, installalo semplicemente nel terminale della tua app React con la seguente riga di codice:

npm install three @react-three/fiber

import { Canvas } from '@react-three/fiber'

return (
<Canvas>
<ambientLight intensity={0.5} />
<spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} />
<pointLight position={[-10, -10, -10]} />
<Box position={[-2.2, 0, 0]} />
<Box position={[2.5, 0, 0]} />
</Canvas>
</div>
);

const Box = (props) => {
const mesh = useRef();
const [active, setActive] = useState(false);
useFrame(() => {
mesh.current.rotation.x = mesh.current.rotation.y += 0.01;
});
const texture = useMemo(() => new THREE.TextureLoader().load(image), []);
return (
<mesh
{...props}
ref={mesh}
scale={active ? [2, 2, 2] : [1.5, 1.5, 1.5]}
onClick={(e) => setActive(!active)}
>
<boxBufferGeometry args={[1, 1, 1]} />
<meshBasicMaterial attach="material" transparent side={THREE.DoubleSide}>
<primitive attach="map" object={texture} />
</meshBasicMaterial>
</mesh>
);
}

Questo è tutto! Ora abbiamo ufficialmente convocato un oggetto 3D e gli abbiamo detto come comportarsi, il tutto usando React-Three-Fiber. C'è molto di più di cui è capace R3F e giocare con i parametri all'interno di questo codice è un ottimo punto di partenza. Carica trame diverse, cambia l'illuminazione, gioca con la scala o regola la fisica della rotazione! Qualunque cosa tu faccia, divertiti con questa nuova tecnologia che abbiamo imparato insieme oggi.