Catégories
Plugin et site web

Une plongée dans React et Three.js en utilisant React-Three-Fiber – Smashing Magazine

A 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…
Plus à propos
Fortune

react-three-fiber est un puissant moteur de rendu Three.js qui permet de rendre des modèles 3D et des animations pour React et ses applications natives. Dans ce didacticiel, vous apprendrez à configurer et à créer des modèles 3D dans une application React.

Aujourd'hui, nous allons apprendre à configurer et à utiliser react-three-fiber pour créer et afficher des modèles 3D et des animations 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 des canevas, de lier des événements utilisateur tels que click les événements et démarrer une boucle de rendu, react-three-fiber vient 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 de react-three-fiber.

Commencer avec react-three-fiber

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 un coup de pouce à la vitesse à laquelle vous créez des modèles 3D et des animations avec Three.js, quelques exemples de sites avec des modèles 3D et des animations peut être trouvé 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 de la boucle de rendu, voyons d'abord ce qu'est Three.js.

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

mesh Une propriété qui permet de définir la forme de nos modèles
hooks react-three-fiber définit des hooks qui nous aident à écrire des fonctions qui aident à définir des événements utilisateur tels que onClick et onPointOver
Boucle de rendu et basée sur les composants react-three-fiber est basé sur les composants et effectue le rendu en fonction d'un changement d'état ou du magasin

Comment utiliser react-three-fiber

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

NPM

npm i three react-three-fiber

FIL

yarn add three react-three-fiber 

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

Construire un modèle et un projet d'animation React 3D Ludo Dice

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 cela 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 installez 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. Ensuite, ouvrons notre projet dans l'éditeur de texte de votre choix, dans notre projet src dossier, supprimez 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 Box composant pour nos dés ludo et notre App composant fourni par React.

Construire le Box Composant

le Box Le composant contiendra la forme de nos dés ludo, une image d'un dé ludo et un état pour le garder toujours en rotation. Tout d'abord, importons tous les packages dont nous avons besoin pour notre Box composant 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 useRef crochet pour accéder au maillage des dés et du useState crochet pour vérifier l'état actif des dés ludo. useMemo crochet sera utilisé pour renvoyer le nombre 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, tandis que le useFrame permet aux composants de s'accrocher à la boucle de rendu, cela permet à un composant de se rendre sur le contenu d'un autre. Ensuite, nous avons importé le three package, puis nous avons importé une image statique d'un dé ludo.

La prochaine étape pour nous est d'écrire la logique de notre Box composant. 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 (
    
  );
}

Dans le code ci-dessus, nous créons un Box composant avec des accessoires, ensuite nous créons une référence appelée mesh en utilisant le useRef hook, nous l'avons fait pour pouvoir 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 à l'aide d'un Géométrie, qui sert à définir la forme du modèle et Matériel 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 useRef crochet ici.

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

Ensuite, nous utilisons le useFrame crochet 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 pivoter 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 en passant dans une réaction useMemo crochet en tant que fonction 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 apprendre davantage sur useMemo crochet ici.

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

const Box = (props) => {
return (
     setActive(!active)}
      >
      
      
        
      
    
  );
}

Dans le code ci-dessus, nous retournons notre Box composant et l'enveloppant dans le mesh nous avons passé toutes les propriétés du Box composant en utilisant l'opérateur d'étalement, puis nous avons référencé le maillage en utilisant le useRef crochet. Ensuite, nous utilisons le scale propriété 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. Dernier point mais non le moindre, nous avons ajouté un onClick événement à définir state à active s'il n'est pas défini par défaut.


Afin de rendre la boîte de dés, nous avons rendu le boxBufferGeometry composant de Three.js, boxBufferGeometry nous aide à dessiner des lignes et des points tels que des boîtes, nous avons utilisé le args argument pour transmettre 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é le attach attribut et en passant un THREE.DoubleSideaccessoires à la side attribut. le THREE.DoubleSide définit les côtés ou les espaces qui doivent être rendus par react-three-fiber.


le primitive Le composant 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 Box composant dans le App.js fichier et complétez notre boîte de dés ludo 3d. Votre composant doit ressembler à l'image ci-dessous.

Composant de boîte pour boîte 3D Ludo

Rendu 3D Ludo Dice Box

Dans cette section, nous allons rendre notre Box composant dans notre App.js et complétez notre boîte ludo 3D, pour faire cela d'abord, créons un App composant et enveloppez-le avec un Canvas tag, il s'agit de rendre nos modèles 3D, faisons-le ci-dessous.

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

Ensuite, ajoutons une lumière aux cases, 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 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 points des dés ludo.
  • pointLight
    Cela fonctionne de manière similaire à la lumière d'une ampoule, la lumière est émise d'un seul point vers toutes les directions, cela sera nécessaire pour l'état actif de notre application.

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

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

Dans le code ci-dessus, nous avons importé le ambientLight composant de react-three-fiber et nous y avons ajouté une intensité de 0,5, ensuite nous avons ajouté une position et un angle à notre spotLight et pointLight composant. 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:

Boîte à dés 3D Ludo

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 aller plus loin en créant des modèles 3D et des animations dans vos applications React et Native en utilisant react-three-fiber tout seul. J'adorerais 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.

Éditorial fracassant(ks, ra, il)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *