Une plongée dans React et Three.js à l'aide de react-three-fiber

Aujourd'hui, nous allons apprendre à configurer et à utiliser react-three-fiber pour créer et afficher des modèles et des animations 3D dans les applications React et React Native.

Ce didacticiel est destiné aux développeurs qui souhaitent en savoir plus sur les animations de modèles 3D sur le Web à l'aide de React et à tous ceux qui ont eu des limitations avec Three.js comme l'incapacité de créer un canevas, de lier des événements utilisateur comme des événements de click et de démarrer une boucle de rendu, react-three-fiber est livré avec ces méthodes. Nous allons créer un modèle 3D pour mieux comprendre comment créer des modèles 3D Three.js à l'aide react-three-fiber .

Premiers pas avec react-three-fiber

Three.js est une bibliothèque qui facilite la création de graphiques 3D dans le navigateur, elle utilise un canevas + WebGL pour afficher les modèles et animations 3D, vous pouvez en savoir plus ici.

react-three-fiber est un moteur de rendu React pour Three.js sur le web et react-native, c'est un coup de pouce à la vitesse à laquelle vous créez des modèles et des animations 3D avec Three.js, quelques exemples de sites avec des modèles et des animations 3D peut être trouvé ici. react-three-fiber réduit le temps passé sur les animations grâce à ses composants réutilisables, ses événements de liaison et sa boucle de rendu, examinons d'abord ce qu'est Three.js.

react-three-fiber nous permet de construire des composants de code threeJS en utilisant l'état React, les crochets et les accessoires, il est également livré avec les éléments suivants :

Comment utiliser react-three-fiber

Pour utiliser react-three-fiber , vous commencez par utiliser les commandes ci-dessous :

MNP

 npm i three react-three-fiber

FIL

 yarn add three react-three-fiber

Remarque : Pour que react-three-fiber fonctionne, vous devrez en installer three (Three.js) comme nous l'avons fait ci-dessus.

Construire un modèle de dés Ludo 3D React et un projet d'animation

Ici, nous allons construire un modèle de dés ludo 3D en utilisant react-three-fiber comme nous l'avons dans la vidéo ci-dessous.

Nous utiliserons create-react-app pour initialiser notre projet, pour ce faire, exécutons la commande ci-dessous sur notre terminal.

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

La commande ci-dessus initialise un projet React dans notre machine locale, ensuite cd dans le répertoire et installons nos packages react-three-fiber et three .

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

Une fois les packages installés, démarrons notre serveur de développement à l'aide de la commande

 npm start

La commande ci-dessus devrait démarrer notre serveur de développement de projet dans notre navigateur. Ouvrons ensuite notre projet dans l'éditeur de texte de notre choix, dans le dossier src de notre projet, supprimons les fichiers suivants : App.css , App.test.js , serviceWorker.js et setupTests.js . Ensuite, supprimons tout le code qui fait référence aux fichiers supprimés sur notre App.js .

Pour ce projet, nous aurons besoin d'un composant Box pour nos dés ludo et de notre composant App fourni par React.

Construire le composant Box

Le composant Box contiendra la forme de nos dés ludo, une image d'un dé ludo et un état pour toujours le garder en rotation. Tout d'abord, importons tous les packages dont nous avons besoin pour notre composant Box ci-dessous.

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

Dans le code ci-dessus, nous importons useRef , useState et useMemo . Nous utiliserons le crochet useRef pour accéder au maillage des dés et le crochet useState pour vérifier l'état actif des dés ludo. Le crochet useMemo sera utilisé pour renvoyer le nombre sur les dés. Ensuite, nous importons Canvas et useFrame de react react-three-fiber , le canvas est utilisé pour dessiner les graphiques sur le navigateur, tandis que useFrame permet aux composants de s'accrocher à la boucle de rendu, ce qui permet à un composant de rendre sur le contenu d'un autre. Ensuite, nous avons importé les three packages, puis nous avons importé une image statique d'un dé ludo.

La prochaine étape consiste à écrire la logique de notre composant Box . Tout d'abord, nous allons commencer par créer un composant fonctionnel et ajouter un état à notre composant, faisons-le ci-dessous.

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

Dans le code ci-dessus, nous créons un composant Box avec des accessoires, puis nous créons une référence appelée mesh à l'aide du crochet useRef , nous l'avons fait afin de pouvoir toujours renvoyer le même mesh à chaque fois.

Un maillage est un élément visuel dans une scène, c'est un objet 3D qui constitue un polygone triangulaire, il est généralement construit à l'aide d'une géométrie, qui est utilisée pour définir la forme du modèle et le matériau qui définit l'apparence du modèle, vous pouvez en savoir plus sur un maillage ici, vous pouvez également en savoir plus sur le crochet useRef ici.

Après avoir initialisé un mesh , nous devons initialiser un état pour notre application à l'aide du hook useState , ici nous configurons l'état survolé et actif de l'application sur false.

Ensuite, nous utilisons le crochet useFrame de react react-three-fiber pour faire pivoter le maillage (dés ludo), en utilisant le code ci-dessous

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

Ici, nous faisons tourner la position actuelle du maillage toutes les 0,01 secondes, ceci est fait pour donner à la rotation une bonne animation.

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

Dans le code ci-dessus, nous créons une constante appelée texture et passons un hook useMemo de réaction en tant que fonction pour charger un nouveau lancer de dés, ici le useMemo pour mémoriser l'image du dé et son numéro. Vous pouvez en savoir plus sur le crochet useMemo ici.

Ensuite, nous voulons rendre le composant Box sur le navigateur et ajouter nos événements, nous le faisons ci-dessous

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

Dans le code ci-dessus, nous renvoyons notre composant Box et l'enveloppons dans le mesh , nous avons passé toutes les propriétés du composant Box à l'aide de l'opérateur de propagation, puis nous avons référencé le maillage à l'aide du crochet useRef . Ensuite, nous utilisons la propriété scale de Three.js pour définir la taille de la boîte à dés lorsqu'elle est active sur 2 et 1,5 lorsqu'elle ne l'est pas. Enfin, nous avons ajouté un événement onClick pour définir state sur active s'il n'est pas défini par défaut.

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

Afin de rendre la boîte à dés, nous avons rendu le composant boxBufferGeometry de Three.js, boxBufferGeometry nous aide à dessiner des lignes et des points tels que des boîtes, nous avons utilisé l'argument args pour passer des constructeurs tels que la taille de la géométrie de la boîte.

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

Le meshBasicMaterial de Three.js est utilisé pour dessiner des géométries sous une forme simple. Ici, nous avons passé l'attribut attach et passé un accessoire THREE.DoubleSide à l'attribut side . Le THREE.DoubleSide définit les côtés ou les espaces qui doivent être rendus par react-three-fiber .

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

Le composant primitive de Three.js est utilisé pour dessiner des graphiques 3D. Nous avons attaché la propriété map afin de conserver la forme originale des dés ludo. Ensuite, nous allons rendre notre composant Box dans le fichier App.js et compléter notre boîte de dés ludo 3d. Votre composant doit ressembler à l'image ci-dessous.

Rendu 3D Ludo Dice Box

Dans cette section, nous allons rendre notre composant Box dans notre App.js et compléter notre boîte ludo 3d, pour ce faire d'abord, créons un composant App et enveloppons-le avec une balise Canvas , c'est pour rendre nos modèles 3D, faisons cela ci-dessous.

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

Ensuite, ajoutons une lumière aux boîtes, react-three-fiber nous fournit trois composants pour éclairer nos modèles, ils sont les suivants

• ambientLight
  Ceci est utilisé pour éclairer tous les objets d'une scène ou d'un modèle de manière égale, il accepte des accessoires tels que l'intensité de la lumière, cela éclairera le corps du dé ludo.
• spotLight
  Cette lumière est émise à partir d'une seule direction, et elle augmente à mesure que la taille de l'objet augmente, cela éclairera les pointes des dés ludo.
• pointLight
  Cela fonctionne comme la lumière d'une ampoule, la lumière est émise d'un seul point dans toutes les directions, cela sera nécessaire pour l'état actif de notre application.

Mettons en œuvre ce qui précède sur notre application ci-dessous.

 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;

Dans le code ci-dessus, nous avons importé le composant ambientLight de react react-three-fiber et lui avons ajouté une intensité de 0,5, puis nous avons ajouté une position et un angle à nos composants spotLight et pointLight . La dernière étape de notre application consiste à rendre notre composant de boîte et à ajouter une position aux boîtes de dés ludo, nous le ferions dans le code ci-dessous

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

Une fois terminé, vos dés ludo 3D devraient ressembler à l'image ci-dessous :

Une démo fonctionnelle est disponible sur CodeSandbox.

Conclusion

react-three-fiber a facilité la création de modèles et d'animations 3D pour les applications React et React Native. En construisant notre boîte à dés ludo 3D, nous avons appris les bases de Three.js ainsi que ses composants et les avantages de react-three-fiber ainsi que la façon de l'utiliser.

Vous pouvez aller plus loin en créant des modèles et des animations 3D dans vos applications React et Native en utilisant vous-même react-three-fiber . J'aimerais voir quelles nouvelles choses vous proposez!

Vous pouvez en savoir plus sur Three.js et react react-three-fiber dans les références ci-dessous.

Ressources associées

• Documentation Three.js
• Les fondamentaux de Three.js
• React-Three-fiber GitHub repo par Poimandres
• documentation de réaction à trois fibres
• Documentation officielle de React Hooks (useState, useMemo, etc.)