O scufundare în React și Three.js folosind react-three-fiber

Astăzi, vom învăța cum să configuram și să folosim react-three-fiber pentru construirea și afișarea modelelor și animațiilor 3D în aplicațiile React și React Native.

Acest tutorial este pentru dezvoltatorii care doresc să afle mai multe despre animațiile modelului 3D de pe web folosind React și pentru oricine a avut limitări cu Three.js, cum ar fi incapacitatea de a crea pânză, de a lega evenimente utilizator, cum ar fi evenimentele de click și de a începe o buclă de randare, react-three-fiber vin cu aceste metode. Vom construi un model 3D pentru a înțelege mai bine cum să construim modele 3D Three.js folosind react-three-fiber .

Noțiuni introductive cu react-three-fiber

Three.js este o bibliotecă care facilitează crearea de grafică 3D în browser, folosește o pânză + WebGL pentru a afișa modelele și animațiile 3D, puteți afla mai multe aici.

react-three-fiber este un renderer React pentru Three.js pe web și react-native, este o creștere a vitezei cu care creați modele 3D și animații cu Three.js, câteva exemple de site-uri cu modele și animații 3D poate fi găsit aici. react-three-fiber reduce timpul petrecut cu animații datorită componentelor sale reutilizabile, a evenimentelor de legare și a buclei de randare, mai întâi să aruncăm o privire la ce este Three.js.

react-three-fiber ne permite să construim componente ale codului threeJS folosind starea React, cârlige și elemente de recuzită, de asemenea, vine cu următoarele elemente:

Cum se utilizează react-three-fiber

Pentru a utiliza react-three-fiber , începeți prin a utiliza comenzile de mai jos:

NPM

 npm i three react-three-fiber

Fire

 yarn add three react-three-fiber

Notă : pentru ca react-three-fiber să funcționeze, va trebui să instalați three (Three.js) așa cum am făcut mai sus.

Construirea unui model React 3D Ludo Dice și proiect de animație

Aici vom construi un model de zaruri ludo 3D folosind react-three-fiber așa cum avem în videoclipul de mai jos.

Vom folosi create-react-app pentru a inițializa proiectul nostru, pentru a face asta, să executăm comanda de mai jos pe terminalul nostru.

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

Comanda de mai sus inițializează un proiect React în mașina noastră locală, apoi să introducem cd -ul în director și să instalăm pachetele noastre react-three-fiber și three .

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

Odată ce pachetele sunt instalate, să pornim serverul nostru de dezvoltare folosind comanda

 npm start

Comanda de mai sus ar trebui să pornească serverul nostru de dezvoltare a proiectelor în browserul nostru. Apoi, să deschidem proiectul nostru în editorul nostru de text la alegere, în folderul nostru proiect src , ștergeți următoarele fișiere: App.css , App.test.js , serviceWorker.js și setupTests.js . Apoi, să ștergem tot codul care face referire la fișierele șterse din App.js

Pentru acest proiect, vom avea nevoie de o componentă Box pentru zarurile noastre ludo și componenta de App oferită de React.

Construirea componentei Box

Componenta Box va conține forma pentru zarurile noastre ludo, o imagine a unui zar ludo și o stare pentru a-l menține mereu în rotație. Mai întâi, să importăm toate pachetele de care avem nevoie pentru componenta noastră Box de mai jos.

 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";

În codul de mai sus, importăm useRef , useState și useMemo . Vom folosi cârligul useRef pentru a accesa rețeaua zarurilor și cârligul useState pentru a verifica starea activă a zarurilor ludo. useMemo hook va fi folosit pentru a returna numărul de pe zar. Apoi, importăm Canvas și useFrame din react-three-fiber , canvas -ul este folosit pentru a desena grafica în browser, în timp ce useFrame permite componentelor să se cupleze în bucla de randare, ceea ce face posibil ca o componentă să fie randată. continutul altuia. Apoi, am importat cele three pachete și apoi am importat o imagine statică a unui zar ludo.

Următorul pentru noi este să scriem logica pentru componenta noastră Box . În primul rând, vom începe cu construirea unei componente funcționale și vom adăuga o stare componentei noastre, să facem asta mai jos.

 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 /> ); }

În codul de mai sus, creăm o componentă Box cu elemente de recuzită, apoi creăm un ref numit mesh folosind cârligul useRef , am făcut acest lucru astfel încât să putem returna întotdeauna aceeași plasă de fiecare dată.

O plasă este un element vizual într-o scenă, este un obiect 3D care alcătuiește un poligon triunghiular, este de obicei construit folosind o Geometrie, care este folosită pentru a defini forma modelului și Material care definește aspectul modelului, puteți aflați despre o plasă aici, De asemenea, puteți afla mai multe despre cârligul useRef aici.

După inițializarea unei mesh , trebuie să inițializam o stare pentru aplicația noastră folosind cârligul useState , aici setăm starea hovered și activă a aplicației la false.

Apoi, folosim cârligul useFrame de la react-three-fiber pentru a roti ochiurile (zarurile ludice), folosind codul de mai jos

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

Aici, rotim poziția actuală a rețelei la fiecare 0,01 secunde, acest lucru se face pentru a oferi rotației o animație bună.

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

În codul de mai sus, creăm o constantă numită texture și trecem într-un cârlig useMemo de reactie ca o funcție pentru a încărca o nouă aruncare de zaruri, aici useMemo pentru a memora imaginea zarurilor și numărul acestuia. Puteți afla despre cârligul useMemo aici.

Apoi, dorim să redăm componenta Box în browser și să adăugăm evenimentele noastre, facem asta mai jos

 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> ); }

În codul de mai sus, ne întoarcem componenta Box și o împachetăm în mesh , am trecut toate proprietățile componentei Box folosind operatorul de răspândire, apoi am făcut referire la rețea folosind cârligul useRef . Apoi, folosim proprietatea scale din Three.js pentru a seta dimensiunea casetei de zaruri când este activă la 2 și 1,5 când nu este. Nu în ultimul rând, am adăugat un eveniment onClick pentru a seta state la active dacă nu este setat implicit.

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

Pentru a reda caseta de zaruri, am randat componenta boxBufferGeometry din Three.js, boxBufferGeometry ne ajută să desenăm linii și puncte, cum ar fi casetele, am folosit argumentul args pentru a trece constructori precum dimensiunea geometriei casetei.

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

meshBasicMaterial de la Three.js, este folosit pentru a desena geometrii într-o formă simplă. Aici am trecut atributul de attach și am trecut o recuzită THREE.DoubleSide atributului side . THREE.DoubleSide definește laturile sau spațiile care ar trebui redate prin react-three-fiber .

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

Componenta primitive din Three.js este folosită pentru a desena grafice 3D. Am atașat proprietatea hărții pentru a menține forma originală a zarurilor ludo. În continuare, vom reda componenta noastră Box în fișierul App.js și vom completa caseta de zaruri ludo 3d. Componenta dvs. ar trebui să arate similar cu imaginea de mai jos.

Redare 3D Ludo Dice Box

În această secțiune, vom reda componenta noastră Box în App.js și vom completa caseta de ludo 3d, pentru a face asta mai întâi, să creăm o componentă a App și să o împachetăm cu o etichetă Canvas , aceasta este pentru a reda modelele noastre 3D, hai sa facem asta mai jos.

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

Apoi, să adăugăm o lumină la cutii, react-three-fiber ne oferă trei componente pentru a ne lumina modelele, acestea sunt după cum urmează

• ambientLight
  Acesta este folosit pentru a ilumina toate obiectele dintr-o scenă sau model în mod egal, acceptă recuzită precum intensitatea luminii, aceasta va lumina corpul zarurilor ludo.
• spotLight
  Această lumină este emisă dintr-o singură direcție și crește pe măsură ce dimensiunea obiectului crește, aceasta va lumina punctele zarurilor ludo.
• pointLight
  Aceasta funcționează similar cu lumina unui bec, lumina este emisă dintr-un singur punct în toate direcțiile, acest lucru va fi necesar pentru starea activă a aplicației noastre.

Să implementăm cele de mai sus în aplicația noastră de mai jos.

 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;

În codul de mai sus, am importat componenta ambientLight din react-three-fiber și i-am adăugat o intensitate de 0,5, apoi am adăugat o poziție și un unghi la componenta noastră spotLight și pointLight . Pasul final al aplicației noastre este să redăm componenta noastră cutie și să adăugăm o poziție la cutiile de zaruri ludo, am face asta în codul de mai jos

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

Când ați terminat, zarurile dvs. ludo 3D ar trebui să arate similar cu imaginea de mai jos:

O demonstrație funcțională este disponibilă pe CodeSandbox.

Concluzie

react-three-fiber a făcut randarea modelelor 3D și a animațiilor mai ușor de creat pentru aplicațiile React și React Native. Prin construirea cutiei noastre de zaruri ludo 3D, am învățat despre elementele de bază ale Three.js, împreună cu componentele și beneficiile sale react-three-fiber , precum și despre cum să-l folosim.

Puteți duce acest lucru mai departe, construind modele 3D și animații în aplicațiile React și Native, folosind react-three-fiber pe cont propriu. Mi-ar plăcea să văd cu ce lucruri noi vii!

Puteți citi mai multe despre Three.js și react-three-fiber în referințele de mai jos.

Resurse conexe

• Documentația Three.js
• Fundamentele Three.js
• React-Three-fibre GitHub repo de Poimandres
• documentație de reacții cu trei fibre
• React Hooks (useState, useMemo etc.) documentație oficială