Comment rendre un modèle 3D dans une application React JS

Salut👋,

De nos jours, les navigateurs deviennent plus puissants que par le passé et ils peuvent désormais rendre facilement différentes animations complexes. Vous avez peut-être vu de nombreux sites Web rendre un modèle 3D sans aucun problème de performances. Dans cet article, nous allons utiliser Three.js pour restituer un modèle d'iPhone dans une application React.

Avant de commencer ce tutoriel, permettez-moi de vous montrer un site Web de démonstration qui rend ce modèle. Voici le lien de démonstration : https://apple-iphone14.netlify.app/

Pour ce site Web, j'ai utilisé Three.JS avec le GSAP pour ajouter des animations de défilement fluides. Si vous voulez apprendre à créer cette page de destination 3D réactive, vous pouvez regarder le tutoriel suivant👇.

Rendons un modèle 3D impressionnant dans notre application React.

Configuration et installation

Pour ce tutoriel, nous utiliserons le modèle CRA (create-react-app). Ouvrez votre dossier de projet et utilisez la commande suivante pour installer le modèle CRA.

 npx create-react-app 3d-model-in-reactjs

Vous pouvez nommer votre application comme vous le souhaitez pour ce tutoriel je l'ai gardé comme "3d-mode-in-reactjs".

Ici, le npx est un utilitaire fourni lorsque vous installez le npm. Il nous aide à exécuter n'importe quel package npm disponible sur le registre npm sans installer ce package.

Installons les bibliothèques requises pour rendre le modèle 3D. Changez le répertoire en "3d-mode-in-reactjs" en utilisant la commande suivante.

 cd 3d-mode-in-reactjs

Utilisez la commande suivante pour installer deux bibliothèques, @react-three/fiber et @react-three/drei .

 npm install @react-three/fiber @react-three/drei

• @react-three/fiber : C'est un moteur de rendu React pour threejs.

• @react-three/drei : Il s'agit d'une collection d'assistants utiles et d'abstractions prêtes à l'emploi entièrement fonctionnelles pour @react-three/fiber.

  
  

Pour ce tutoriel, nous allons utiliser un modèle 3D d'Apple iPhone 13 Pro Max. Vous pouvez obtenir ce modèle à partir du lien suivant👇.

• "Apple iPhone 13 Pro Max" par DatSketch est sous licence Creative Commons Attribution . Avant d'utiliser ce modèle dans un projet, assurez-vous de vérifier sa licence.

  
  

Ouvrez le lien donné et téléchargez le modèle au format gltf . Pourquoi GLTF ? Selon la documentation de threejs, glTF se concentre sur la livraison d'actifs d'exécution, il est compact à transmettre et rapide à charger.

Une fois que vous avez téléchargé le fichier, créez un dossier appelé assets dans le dossier src et extrayez tout le fichier modèle sous le dossier appelé 3D-Model .

Ouvrez le fichier App.css et remplacez tout le code par le css suivant.

 .App { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; }

Nous sommes maintenant prêts à rendre le modèle.

Comprenons les bases du rendu d'un modèle 3D

Maintenant, il y a 3 choses que vous devez garder à l'esprit lors du rendu d'un modèle.

1. scène : Ici, vous pouvez configurer tous les objets, lumières et caméras.

2. caméra : Elle est utilisée pour visualiser le modèle 3D à travers différents anges.

3. renderer : Il est utilisé pour afficher/rendre une scène sur un élément HTML appelé canvas .

   
   

Si vous utilisez directement threejs dans un projet JavaScript simple, vous devrez peut-être configurer toutes ces choses à partir des bases, mais dans ce tutoriel, nous utilisons @react-three/fiber et @react-three/drei donc nous n'avons pas faire toutes les choses à partir de zéro.

Ouvrez le fichier App.js , nettoyez le code par défaut et importons l'élément canvas de @react-three/fiber . Consultez l'extrait de code suivant.

 import "./App.css"; import { Canvas } from "@react-three/fiber"; function App() { return ( <div className="App"> <Canvas>{/* Here we will render out model */}</Canvas> </div> ); } export default App;

Ici, le composant Canvas configure la scene et la camera et rend la scene à chaque image.

Copiez maintenant le code suivant dans le composant <Canvas /> .

 <Canvas> <mesh> <boxGeometry /> <meshStandardMaterial /> </mesh> </Canvas>

Comprenons chacun de ces éléments.

• <mesh> : Un mesh est une classe qui hérite d'Object3d et qui représente des objets polygonaux. Dans le maillage, vous pouvez instancier l'objet polygone en utilisant Geometry et Material .

• <boxGeometry /> : C'est une classe de géométrie pour un cuboïde rectangulaire avec une 'largeur', une 'hauteur' et une 'profondeur' données

• <meshStandardMaterial /> : C'est un matériau physique standard.

  
  

Pour l'instant, vous pouvez voir un carré noir au milieu qui ne ressemble pas à un objet 3D.

Ajoutons des contrôles pour pouvoir déplacer l'angle de la caméra autour de cet objet 3D. Importez les <OrbitControls /> de @react-three/drei en utilisant la ligne suivante.

 import { OrbitControls } from "@react-three/drei";

Rendu maintenant ce <OrbitControls /> à l'intérieur des composants <Canvas> et après le <mesh> . Actualisez la page du serveur de développement et essayez de saisir l'objet. Maintenant, vous pourrez peut-être voir ce carré comme un objet 3D. Ces <OrbitControls /> permettent à la caméra d'orbiter autour d'une cible.

Maintenant, l'objet est totalement noir car il n'y a pas de source de lumière. Ajoutons donc des lumières dans notre scène. Dans le composant <Canvas /> ajoutez la ligne suivante avant le <mesh> .

 <ambientLight />

Ici, cette ambientLight illumine globalement tous les objets de la scène de manière égale. Vous pouvez maintenant voir la couleur blanc cassé du matériau maillé. Nous pouvons également modifier l'intensité de la lumière ambiante à l'aide d'accessoires, comme indiqué dans le code suivant.

 <ambientLight intensity={1.25} />

Vous pouvez également modifier la couleur de l'objet 3D en utilisant color prop dans le <meshStandardMaterial /> . vérifier la ligne suivante.

 <meshStandardMaterial color="green"/>

Maintenant, la couleur de l'objet 3D est verte. Il existe de nombreuses lumières et éléments différents que vous pouvez utiliser pour créer un modèle entier. Pour cela vous pouvez vous référer à la documentation de threejs . C'est tout pour les bases pas rendu notre iPhone.

Conversion du modèle en composant JSX

Ouvrez les fichiers de modèle et vous verrez différents fichiers comme textures , scene.gltf , scene.bin etc. Nous allons convertir scene.gltf en un composant JSX afin que nous puissions facilement le rendre dans notre application React.

Maintenant, pour convertir tous les fichiers GLTF en composant JSX, nous allons utiliser un simple outil de ligne de commande appelé gltfjsx . Selon la documentation, le gltfjsx est un petit outil de ligne de commande qui transforme les actifs GLTF en composants JSX réactifs à trois fibres déclaratifs et réutilisables.

Ouvrez maintenant le terminal/cmd et allez dans le répertoire où vous avez stocké tous les fichiers du modèle, dans mon cas c'est dans le dossier 3D-Model qui se trouve dans le dossier assets . Je vais donc utiliser la commande suivante pour changer de répertoire.

 cd src/assets/3D-Model

Utilisez maintenant la commande suivante.

 npx gltfjsx scene.gltf

Cette commande prendra quelques secondes et retournera le fichier Scene.js qui est le composant JSX.

REMARQUE : Cette commande gltfjsx peut générer une erreur si vous utilisez la dernière version de NodeJS. J'utilise actuellement 17.2.0 et cette commande fonctionne correctement. Si vous rencontrez une erreur, veuillez rétrograder votre version de NodeJs et réessayer ce code. Vous pouvez utiliser des outils comme nvm pour utiliser différentes versions de NodeJs.

Important!

Avant de rendre le modèle à partir du fichier Scene.js , nous devons copier les fichiers de modèle dans le répertoire public car si vous regardez dans le fichier Scene.js , il utilise le crochet useGLTF qui charge les nœuds et les matériaux à partir du fichier /scene.gltf . Copiez donc textures , scene.bin et scene.gltf dans le dossier public de votre projet.

Rendu du modèle 3D

Ouvrez le fichier App.js et supprimez le <mesh> . Importons le Model à partir du fichier Scene.js .

 import Model from "./assets/3D-Model/Scene";

Rendu maintenant le <Model /> à l'intérieur du composant <Canvas /> , avant le <OrbitControls /> .

 <Canvas> <ambientLight intensity={1.25} /> <Model /> <OrbitControls /> </Canvas>

Actualisez la page de sortie. Maintenant, vous devriez pouvoir voir le rendu de l'iphone sur l'écran, vous pouvez zoomer et dézoomer et déplacer le modèle. Agrandissons la vue du modèle. Vous pouvez accéder directement à la caméra à partir de l'élément canvas. Ajoutez la caméra à l'intérieur du canevas en tant qu'extrait de code suivant.

<Canvas camera={{fov: 18}}>

Ici, le fov signifie le "champ de vision". Après avoir défini le fov actualisez la page pour voir la sortie. Pour l'instant, nous avons défini le fov sur 18. Vous pouvez essayer différents nombres et voir le résultat.

Pour l'instant il n'y a pas de réflexion sur le modèle. Pour ajouter de la réflexion sur le modèle, vous devez définir des images autour de ce modèle afin que ces images puissent se refléter sur la surface de ce modèle. Au lieu d'ajouter ces images, utilisons le composant <Environment /> de la bibliothèque @react-three/drei .

Importons le <Environment /> ,

 import { Environment, OrbitControls } from "@react-three/drei";

Maintenant, après le modèle, ajoutons l'environnement.

 <Environment preset="sunset" />

Ici, le préréglage définit différents types d'environnement entourant le modèle. Pour l'instant, nous l'avons réglé sur "coucher du soleil". Vous pouvez vérifier les différents préréglages disponibles à partir d' ici .

Après avoir ajouté cet environnement, vous devriez voir la belle réflexion sur notre iPhone. Rendons le modèle à l'intérieur du composant Suspense du React afin qu'il puisse se charger de manière asynchrone.

 <Suspense fallback={null}> <Model /> </Suspense>

Voici le code final.

https://gist.github.com/codebucks27/6defde4db7e290d95d7ff1ae39078a06

Dernières pensées

C'est la fin de ce tutoriel. Vous pouvez utiliser https://docs.pmnd.rs/ pour lire la documentation de @react-three/fiber et @react-three/drei et essayer différents éléments. Si vous souhaitez créer un site Web complet à l'aide du modèle 3D et animer ses couleurs, vous pouvez suivre le didacticiel vidéo donné au début de cette leçon.

Si vous aimez ce didacticiel, vous devriez consulter les didacticiels géniaux que j'ai sur ma chaîne YouTube appelée CodeBucks . Vous pouvez le vérifier à partir d' ici .

Vous aimerez peut-être aussi ces modèles de sites Web :

• Un beau modèle de portfolio en ReactJS => ici

• Page de destination de la collection NFT dans ReactJS => [ici](- Un beau modèle de portfolio dans ReactJS => ici )

  
  

Merci d'avoir lu ce tutoriel. Passe une bonne journée!