Zanurz się w React i Three.js przy użyciu reakcji retrieve-three-fiber

Dzisiaj nauczymy się konfigurować i używać React react-three-fiber do budowania i wyświetlania modeli 3D i animacji w aplikacjach React i React Native.

Ten samouczek jest przeznaczony dla programistów, którzy chcą dowiedzieć się więcej o animacjach modeli 3D w Internecie za pomocą Reacta oraz dla każdego, kto miał ograniczenia w Three.js, takie jak niemożność tworzenia płótna, wiązania zdarzeń użytkownika, takich jak zdarzenia click i uruchamiania pętli renderowania, React react-three-fiber pochodzi z tych metod. Będziemy budować model 3D, aby lepiej zrozumieć, jak tworzyć modele 3D w formacie Three.js przy użyciu react-three-fiber .

Pierwsze kroki z react-three-fiber

Three.js to biblioteka ułatwiająca tworzenie grafiki 3D w przeglądarce, wykorzystuje płótno + WebGL do wyświetlania modeli 3D i animacji, więcej dowiesz się tutaj.

React-three-fiber to renderer React dla Three.js w sieci i natywny, zwiększa szybkość tworzenia modeli 3D i animacji za pomocą Three.js, kilka przykładów witryn z modelami i animacjami 3D można znaleźć tutaj. react-three-fiber skraca czas poświęcony na animacje ze względu na komponenty wielokrotnego użytku, zdarzenia wiążące i pętlę renderowania. Najpierw przyjrzyjmy się, czym jest Three.js.

React react-three-fiber pozwala nam budować komponenty kodu threeJS za pomocą stanu React, hooków i propsów, zawiera również następujące elementy:

Jak korzystać react-three-fiber

Aby użyć react-three-fiber , zacznij od poniższych poleceń:

NPM

 npm i three react-three-fiber

PRZĘDZA

 yarn add three react-three-fiber

Uwaga : aby react-three-fiber działała, musisz zainstalować three (Three.js), tak jak to zrobiliśmy powyżej.

Budowanie modelu kostki React 3D Ludo i projektu animacji

Tutaj zbudujemy model 3D kości ludo przy użyciu react-three-fiber , tak jak na poniższym filmie.

Użyjemy create-react-app do zainicjowania naszego projektu, w tym celu wykonaj poniższe polecenie na naszym terminalu.

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

Powyższe polecenie inicjalizuje projekt React na naszej lokalnej maszynie, następnie cd do katalogu i zainstalujmy nasze pakiety React react-three-fiber i three .

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

Po zainstalowaniu pakietów uruchommy nasz serwer deweloperski za pomocą polecenia

 npm start

Powyższe polecenie powinno uruchomić nasz serwer rozwoju projektu w naszej przeglądarce. Następnie otwórzmy nasz projekt w wybranym przez nas edytorze tekstu, w naszym folderze src projektu, usuńmy następujące pliki: App.css , App.test.js , serviceWorker.js i setupTests.js . Następnie usuńmy cały kod, który odwołuje się do usuniętych plików w naszym App.js .

W tym projekcie będziemy potrzebować komponentu Box dla naszych kości Ludo oraz komponentu App , który jest dostarczany przez React.

Budowanie komponentu Box

Komponent Box będzie zawierał kształt naszych kości ludo, obraz kości ludo oraz stan, w którym zawsze będzie się obracał. Najpierw zaimportujmy poniżej wszystkie potrzebne nam pakiety dla naszego komponentu 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";

W powyższym kodzie importujemy useRef , useState i useMemo . Użyjemy haka useRef , aby uzyskać dostęp do siatki kostek i haka useState , aby sprawdzić aktywny stan kości ludo. Haczyk useMemo posłuży do zwrócenia liczby na kostce. Następnie importujemy Canvas i useFrame z React react-three-fiber , canvas służy do rysowania grafiki w przeglądarce, podczas gdy useFrame pozwala komponentom podpiąć się do pętli renderowania, co umożliwia renderowanie jednego komponentu treść innego. Następnie zaimportowaliśmy three pakiety, a następnie zaimportowaliśmy statyczny obraz kości ludo.

Kolejnym zadaniem dla nas jest napisanie logiki dla naszego komponentu Box . Najpierw zaczniemy od zbudowania funkcjonalnego komponentu i dodania stanu do naszego komponentu, zróbmy to poniżej.

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

W powyższym kodzie tworzymy komponent Box z rekwizytami, następnie tworzymy ref o nazwie mesh za pomocą haka useRef , zrobiliśmy to tak, że za każdym razem możemy zwrócić tę samą siatkę.

Siatka jest elementem wizualnym w scenie, jest to obiekt 3D, który tworzy trójkątny wielokąt, zwykle jest budowany przy użyciu geometrii, która służy do definiowania kształtu modelu i materiału , który określa wygląd modelu, możesz dowiedz się o Mesh tutaj, Możesz również dowiedzieć się więcej o haczyku useRef tutaj.

Po zainicjowaniu mesh musimy zainicjować stan naszej aplikacji za pomocą haka useState , tutaj ustawiamy stan najechania i aktywny aplikacji na false.

Następnie używamy haczyka useFrame z React react-three-fiber do obracania siatki (kostki ludo), korzystając z poniższego kodu

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

Tutaj obracamy bieżącą pozycję siatki co 0,01 sekundy, aby zapewnić dobrą animację obrotu.

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

W powyższym kodzie tworzymy stałą zwaną texture i przekazujemy hook useMemo w React jako funkcję do załadowania nowego rzutu kostką, tutaj useMemo do zapamiętywania obrazu kostki i jego numeru. O haczyku useMemo się tutaj.

Następnie chcemy wyrenderować komponent Box w przeglądarce i dodać nasze zdarzenia, robimy to poniżej

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

W powyższym kodzie zwracamy nasz komponent Box i owijając go w mesh , przekazaliśmy wszystkie właściwości komponentu Box za pomocą operatora rozproszenia, a następnie odwołujemy się do siatki za pomocą haka useRef . Następnie używamy właściwości scale z Three.js, aby ustawić rozmiar pudełka na kości, gdy jest aktywne, na 2 i 1,5, gdy nie jest. Na koniec dodaliśmy zdarzenie onClick , aby ustawić state na active , jeśli nie jest ustawiony domyślnie.

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

Aby wyrenderować pudełko z kostką, wyrenderowaliśmy komponent boxBufferGeometry z Three.js, boxBufferGeometry pomaga nam rysować linie i punkty, takie jak pudełka, użyliśmy argumentu args do przekazania konstruktorów, takich jak rozmiar geometrii pudełka.

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

meshBasicMaterial z Three.js służy do rysowania geometrii w prostej formie. Tutaj przekazaliśmy atrybut attach i atrybut THREE.DoubleSide do atrybutu side . THREE.DoubleSide definiuje boki lub przestrzenie, które powinny być renderowane przez response react-three-fiber .

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

primitive komponent z Three.js służy do rysowania wykresów 3D. Załączyliśmy właściwość mapy, aby zachować oryginalny kształt kości do gry w Ludo. Następnie wyrenderujemy nasz komponent Box w pliku App.js i uzupełnimy nasze pudełko z kostkami do gry w 3D. Twój komponent powinien wyglądać podobnie do poniższego obrazu.

Renderowanie 3D Pudełka na Kostki Ludo

W tej sekcji wyrenderujemy nasz komponent Box w naszym App.js i uzupełnimy nasze pudełko 3D Ludo. Aby to zrobić najpierw, stwórzmy komponent App i owińmy go tagiem Canvas , aby renderować nasze modele 3D, zróbmy to poniżej.

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

Następnie dodajmy światło do pudełek, react-three-fiber dostarcza nam trzy elementy do oświetlenia naszych modeli, są one następujące

• ambientLight
  Służy do równego oświetlenia wszystkich obiektów w scenie lub modelu, akceptuje rekwizyty, takie jak intensywność światła, to oświetli korpus kości ludo.
• spotLight
  To światło jest emitowane z jednego kierunku i zwiększa się wraz ze wzrostem wielkości obiektu, oświetlając punkty kości ludo.
• pointLight
  Działa to podobnie do światła żarówki, światło emitowane jest z jednego punktu we wszystkich kierunkach, będzie to konieczne do aktywnego stanu naszej aplikacji.

Zaimplementujmy powyższe w naszej aplikacji poniżej.

 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;

W powyższym kodzie zaimportowaliśmy komponent ambientLight z react-three-fiber i dodaliśmy do niego intensywność 0,5, a następnie dodaliśmy pozycję i kąt do naszego komponentu spotLight i pointLight . Ostatnim krokiem naszej aplikacji jest wyrenderowanie naszego komponentu pudełka i dodanie pozycji do pudełek z kostkami do gry Ludo, zrobilibyśmy to w poniższym kodzie

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

Po zakończeniu twoja kostka ludo 3D powinna wyglądać podobnie do poniższego obrazu:

Działające demo jest dostępne na CodeSandbox.

Wniosek

React react-three-fiber ułatwił tworzenie modeli 3D i animacji dla aplikacji React i React Native. Budując nasze pudełko do gry w kości do gry w 3D, poznaliśmy podstawy Three.js, jego komponenty i korzyści z react-three-fiber , a także sposób jego używania.

Możesz posunąć się dalej, budując modele 3D i animacje w aplikacjach React i Native, korzystając z własnych rozwiązań React react-three-fiber . Chętnie zobaczę, jakie nowe rzeczy wymyślisz!

Możesz przeczytać więcej na temat Three.js i react-three-fiber w poniższych odnośnikach.

Powiązane zasoby

• Dokumentacja Three.js
• Podstawy Three.js
• React-Three-fiber repozytorium GitHub autorstwa Poimandres
• React-three-fiber dokumentacja
• React Hooks (useState, useMemo itp.) oficjalna dokumentacja