Une plongée dans React et Three.js en utilisant ReactThreeFiber

À propos de l'auteur

Fortune Ikechi est un ingénieur Frontend basé dans l'État de Rivers au Nigeria. Il est étudiant à l'Université de Port-Harcourt. Il est passionné par la communauté et…
En savoir plus sur
Fortune
…

Aujourd'hui, nous allons apprendre à configurer et à utiliser react-three-fiber pour créer et afficher Modèles et 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 des limitations avec Three.js telles que l'incapacité de créer un canevas, de lier les événements utilisateur comme cliquez sur les événements et lancez une boucle de rendu, react-three-fiber est fourni avec ces méthodes. Nous allons construire un modèle 3D pour mieux comprendre comment construire des modèles 3D Three.js en utilisant react-three-fiber .

Premiers pas avec react-three-fiber [19659003] Three.js est une bibliothèque qui facilite la création de graphiques 3D dans le navigateur, elle utilise un canvas + WebGL pour afficher les modèles 3D et les animations, 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 une augmentation de la vitesse à laquelle vous créez 3D modèles et animations avec Three.js, quelques exemples de sites avec des modèles 3D et des animations peuvent être trouvés ici. react-three-fiber réduit le temps passé sur les animations en raison de ses composants réutilisables, des événements de liaison et rendre la boucle, voyons d'abord ce qu'est Three.js.

react-three-fiber nous permet de construire des composants de threeJS [1 9459021] code 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:

NPM

 npm i three react-three-fiber

YARN

 yarn add three react-three-fiber

Remarque : Pour que react-three-fiber fonctionne, vous devrez installer trois (Three.js) comme nous l'avons fait ci-dessus. [19659025] Construction d'un modèle de dés Ludo 3D React et d'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 utilisera 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, puis cd dans le répertoire et installez nos packages react-three-fiber et trois .

 cd react-three-fiber-ludo-model

npm i trois réagissent trois fibres

Une fois les packages installés, démarrons notre serveur de développement en utilisant la commande

 npm start

La commande ci-dessus devrait démarrer notre serveur de développement de projet dans notre navigateur. Ensuite, ouvrons notre projet dans l'éditeur de texte de votre choix, dans notre dossier project src supprimons les fichiers suivants: App.css App.test.js , serviceWorker.js et setupTests.js . Ensuite, supprimons tout le code faisant 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 notre ] Composant App donné par React.

Construction Le composant Box

Le composant Box contiendra la forme de nos dés ludo, une image d'un ludo dés 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} de "react";
import {Canvas, useFrame} de "react-three-fiber";
importer * comme TROIS à partir de "trois";
importez cinq depuis "./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. useMemo hook sera utilisé pour renvoyer le numéro sur les dés. Ensuite, nous importons Canvas et useFrame de react-three-fiber le canvas est utilisé pour dessiner les graphiques sur le navigateur , alors que le useFrame permet aux composants de s'accrocher dans la boucle de rendu, cela permet à un composant de se rendre sur le contenu d'un autre. Ensuite, nous avons importé le package three puis nous avons importé une image statique d'un dé ludo.

Ensuite, pour nous, il faut é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) => {
  maillage const = useRef ();

  const [active, setActive] = useState (faux);

  useFrame (() => {
    mesh.current.rotation.x = mesh.current.rotation.y + = 0,01;
  });

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

Dans le code ci-dessus, nous créons un composant Box avec des accessoires, ensuite nous créons un ref appelé mesh en utilisant le crochet useRef nous l'avons fait afin que nous puissions toujours renvoyer le même maillage à 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 en utilisant une Geometry, qui est utilisé pour définir la forme du modèle et Material qui définit l'apparence du modèle, vous pouvez en savoir plus sur un Mesh ici Vous pouvez également en savoir plus sur le useRef hook here .

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

Ensuite, nous utilisons le crochet useFrame de 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 ( cinq), []);

Dans le code ci-dessus, nous créons une constante appelée texture et en passant un hook useMemo pour charger un nouveau jet 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

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

 const Box = (props) => {
revenir (
     setActive (! Actif)}
      >
      
      
        
      
    
  );
}

Dans le code ci-dessus, nous retournons notre composant Box et l'enveloppons dans le maillage nous avons passé toutes les propriétés du composant Box en utilisant l'étalement , puis nous avons référencé le maillage en utilisant le crochet useRef . Ensuite, nous utilisons la propriété scale de Three.js pour définir la taille de la boîte de 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 état sur actif s'il n'est pas défini par défaut.

Afin de rendre la boîte de 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é le args pour passer des constructeurs tels que la taille de la géométrie de la boîte.

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 en passant un accessoire THREE.DoubleSide à l'attribut côté . THREE.DoubleSide définit les côtés ou les espaces qui doivent être rendus par react-three-fiber .

Le composant primitif 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étons notre boîte ludo 3D, pour faire cela d'abord, créons un composant App et enveloppons-le avec une balise Canvas c'est pour rendre nos modèles 3D, faisons-le ci-dessous.

 const App = () => {
  revenir (
    
    
  );
}
exporter l'application par défaut;

Ensuite, ajoutons une lumière aux boîtiers, 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 la même manière, il accepte des accessoires tels que l'intensité de la lumière, cela éclairera le corps des dés 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.

Implémentons ce qui précède sur notre application ci-dessous.

 const App = () => {
  revenir (
    
      
      
      
    
  );
}
exporter l'application par défaut;

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

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 simplifié le rendu des modèles 3D et des animations pour les applications React et React Native. En construisant notre boîte à dés 3D ludo, nous avons appris les bases de Three.js ainsi que ses composants et avantages de react-three-fiber ainsi que comment l'utiliser.

Vous pouvez prendre cela en créant des modèles et des animations 3D dans vos applications React et Native en utilisant react-three-fiber vous-même. J'aimerais voir les nouveautés que vous proposez!

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

Related Resources

(ks, ra, il)