Un tuffo in React e Three.js usando react-three-fiber

Oggi impareremo come configurare e utilizzare react-three-fiber per costruire e visualizzare modelli 3D e animazioni nelle applicazioni React e React Native.

Questo tutorial è per gli sviluppatori che vogliono saperne di più sulle animazioni del modello 3D nel Web utilizzando React e per chiunque abbia avuto limitazioni con Three.js come l'impossibilità di creare canvas, associare eventi utente come eventi click e avviare un ciclo di rendering, react-three-fiber viene fornito con questi metodi. Costruiremo un modello 3D per capire meglio come costruire modelli 3D Three.js usando react-three-fiber .

Per iniziare con react-three-fiber

Three.js è una libreria che semplifica la creazione di grafica 3D nel browser, utilizza una tela + WebGL per visualizzare i modelli 3D e le animazioni, puoi saperne di più qui.

react-three-fiber è un renderer React per Three.js sul web e react-native, è una spinta alla velocità con cui crei modelli 3D e animazioni con Three.js, alcuni esempi di siti con modelli 3D e animazioni può essere trovato qui. react-three-fiber riduce il tempo speso per le animazioni a causa dei suoi componenti riutilizzabili, eventi di binding e loop di rendering, prima diamo un'occhiata a cosa è Three.js.

react-three-fiber ci consente di costruire componenti del codice threeJS usando lo stato React, hook e props, inoltre include i seguenti elementi:

Come usare react-three-fiber

Per utilizzare react-three-fiber , inizi utilizzando i comandi seguenti:

NPM

 npm i three react-three-fiber

FILATO

 yarn add three react-three-fiber

Nota : per far funzionare react-three-fiber , dovrai installarne three (Three.js) come abbiamo fatto sopra.

Costruire un progetto di animazione e modello di dadi Ludo React 3D

Qui costruiremo un modello di dadi ludo 3D usando react-three-fiber come nel video qui sotto.

Useremo create-react-app per inizializzare il nostro progetto, per farlo eseguiamo il comando qui sotto sul nostro terminale.

 create-react-app react-three-fiber-ludo-model

Il comando sopra inizializza un progetto React all'interno della nostra macchina locale, quindi inseriamo cd nella directory e installiamo i nostri pacchetti react-three-fiber e three .

 cd react-three-fiber-ludo-model npm i three react-three-fiber

Una volta installati i pacchetti, avviamo il nostro server di sviluppo utilizzando il comando

 npm start

Il comando sopra dovrebbe avviare il nostro server di sviluppo del progetto nel nostro browser. Quindi apriamo il nostro progetto nel nostro editor di testo preferito, all'interno della nostra cartella src del progetto, elimina i seguenti file: App.css , App.test.js , serviceWorker.js e setupTests.js . Quindi, eliminiamo tutto il codice che fa riferimento ai file eliminati sul nostro App.js .

Per questo progetto, avremo bisogno di un componente Box per i nostri ludo dices e il nostro componente App fornito da React.

Costruire il componente Box

Il componente Box conterrà la forma per i nostri dadi ludo, un'immagine di un dado ludo e uno stato per mantenerlo sempre in rotazione. Per prima cosa, importiamo di seguito tutti i pacchetti di cui abbiamo bisogno per il nostro componente Box .

 import React, { useRef, useState, useMemo } from "react"; import { Canvas, useFrame } from "react-three-fiber"; import * as THREE from "three"; import five from "./assets/five.png";

Nel codice sopra, stiamo importando useRef , useState e useMemo . Useremo il gancio useRef per accedere alla mesh dei dadi e il gancio useState per verificare lo stato attivo dei dadi ludo. useMemo hook verrà utilizzato per restituire il numero sui dadi. Successivamente, stiamo importando Canvas e useFrame da react-three-fiber , il canvas viene utilizzato per disegnare la grafica sul browser, mentre useFrame consente ai componenti di agganciarsi al render-loop, questo rende possibile il rendering di un componente il contenuto di un altro. Successivamente, abbiamo importato i three pacchetti e quindi abbiamo importato un'immagine statica di un dado ludo.

Il prossimo passo per noi è scrivere la logica per il nostro componente Box . Innanzitutto, inizieremo con la creazione di un componente funzionale e aggiungeremo uno stato al nostro componente, facciamolo di seguito.

 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(five), []); return ( <Box /> ); }

Nel codice sopra, stiamo creando un componente Box con oggetti di scena, quindi creiamo un ref chiamato mesh usando il gancio useRef , lo abbiamo fatto in modo da poter restituire sempre la stessa mesh ogni volta.

Una mesh è un elemento visivo in una scena, è un oggetto 3D che costituisce un poligono triangolare, di solito è costruito utilizzando una Geometria, che viene utilizzata per definire la forma del modello e Materiale che definisce l'aspetto del modello, è possibile scopri una mesh qui, puoi anche saperne di più sul gancio useRef qui.

Dopo aver inizializzato una mesh , dobbiamo inizializzare uno stato per la nostra applicazione usando l'hook useState , qui impostiamo lo stato attivo e sospeso dell'applicazione su false.

Successivamente, utilizziamo il gancio useFrame di react-three-fiber per ruotare la mesh (ludo dice), usando il codice seguente

 mesh.current.rotation.x = mesh.current.rotation.y += 0.01;

Qui, stiamo ruotando la posizione corrente della mesh ogni 0,01 secondi, questo viene fatto per dare una buona animazione alla rotazione.

 const texture = useMemo(() => new THREE.TextureLoader().load(five), []);

Nel codice sopra, stiamo creando una costante chiamata texture e passando in un hook useMemo come funzione per caricare un nuovo lancio di dadi, qui useMemo per memorizzare l'immagine del dado e il suo numero. Puoi conoscere il hook useMemo qui.

Successivamente, vogliamo eseguire il rendering del componente Box sul browser e aggiungere i nostri eventi, lo facciamo di seguito

 const Box = (props) => { 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> ); }

Nel codice sopra, stiamo restituendo il nostro componente Box e avvolgendolo nella mesh abbiamo passato tutte le proprietà del componente Box usando l'operatore spread, quindi abbiamo fatto riferimento alla mesh usando l'hook useRef . Successivamente, utilizziamo la proprietà scale di Three.js per impostare la dimensione della casella dei dadi quando è attiva su 2 e 1,5 quando non lo è. Ultimo ma non meno importante, abbiamo aggiunto un evento onClick per impostare lo state su active se non è impostato su predefinito.

 <boxBufferGeometry args={[1, 1, 1]} />

Per eseguire il rendering della scatola dei dadi, abbiamo eseguito il rendering del componente boxBufferGeometry da Three.js, boxBufferGeometry ci aiuta a disegnare linee e punti come scatole, abbiamo usato l'argomento args per passare costruttori come la dimensione della geometria della scatola.

 <meshBasicMaterial attach="material" transparent side={THREE.DoubleSide}>

Il meshBasicMaterial di Three.js viene utilizzato per disegnare geometrie in una forma semplice. Qui abbiamo passato l'attributo attach e abbiamo passato un props THREE.DoubleSide all'attributo side . Il THREE.DoubleSide definisce i lati o gli spazi che dovrebbero essere resi da react-three-fiber .

 <primitive attach="map" object={texture} />

Il componente primitive di Three.js viene utilizzato per disegnare grafici 3D. Abbiamo allegato la proprietà della mappa per mantenere la forma originale dei dadi ludo. Successivamente, renderemo il nostro componente Box nel file App.js e completeremo la nostra scatola di dadi ludo 3d. Il tuo componente dovrebbe essere simile all'immagine qui sotto.

Rendering 3D Ludo Dice Box

In questa sezione, renderemo il nostro componente Box nel nostro App.js e completeremo il nostro ludo box 3d, per farlo prima, creiamo un componente App e lo avvolgiamo con un tag Canvas , questo per renderizzare i nostri modelli 3D, facciamolo qui sotto.

 const App = () => { return ( <Canvas> </Canvas> ); } export default App;

Successivamente, aggiungiamo una luce alle scatole, react-three-fiber ci fornisce tre componenti per illuminare i nostri modelli, sono i seguenti

• ambientLight
  Questo è usato per illuminare tutti gli oggetti in una scena o modello allo stesso modo, accetta oggetti di scena come l'intensità della luce, questo illuminerà il corpo dei dadi ludo.
• spotLight
  Questa luce viene emessa da un'unica direzione e aumenta all'aumentare delle dimensioni dell'oggetto, questo illuminerà i punti dei dadi ludo.
• pointLight
  Funziona in modo simile alla luce di una lampadina, la luce viene emessa da un unico punto in tutte le direzioni, questo sarà necessario per lo stato attivo della nostra applicazione.

Implementiamo quanto sopra sulla nostra applicazione di seguito.

 const App = () => { return ( <Canvas> <ambientLight intensity={0.5} /> <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} /> <pointLight position={[-10, -10, -10]} /> </Canvas> ); } export default App;

Nel codice sopra, abbiamo importato il componente ambientLight da react-three-fiber e aggiunto un'intensità di 0,5, quindi abbiamo aggiunto una posizione e un angolo al nostro componente spotLight e pointLight . Il passaggio finale della nostra applicazione è rendere il nostro componente box e aggiungere una posizione alle scatole dei dadi ludo, lo faremmo nel codice seguente

 <Box position={[-1.2, 0, 0]} /> <Box position={[2.5, 0, 0]} />

Al termine, i tuoi dadi ludo 3D dovrebbero essere simili all'immagine qui sotto:

Una demo funzionante è disponibile su CodeSandbox.

Conclusione

react-three-fiber ha reso più facile creare animazioni e modelli 3D per le applicazioni React e React Native. Costruendo la nostra scatola di dadi ludo 3D, abbiamo appreso le basi di Three.js insieme ai suoi componenti e ai vantaggi di react-three-fiber , nonché a come usarlo.

Puoi spingerti oltre costruendo modelli 3D e animazioni nelle tue applicazioni React e Native usando il tuo react-three-fiber . Mi piacerebbe vedere quali novità ti vengono in mente!

Puoi leggere di più su Three.js e react-three-fiber nei riferimenti seguenti.

Risorse correlate

• Documentazione Three.js
• Fondamenti di Three.js
• Repo React-Three-fiber GitHub di Poimandres
• documentazione di reazione a tre fibre
• Documentazione ufficiale di React Hooks (useState, useMemo, ecc.).