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   pour restituer un modèle d'iPhone dans une application React. Three.js  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👇.   https://youtu.be/cT160dOzpGY  Rendons un modèle 3D impressionnant dans notre application React.  Configuration et installation  Pour ce tutoriel, nous utiliserons le modèle   (create-react-app). Ouvrez votre dossier de projet et utilisez la commande suivante pour installer le modèle CRA. 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,   et   . @react-three/fiber @react-three/drei   npm install @react-three/fiber @react-three/drei    : C'est un moteur de rendu React pour threejs. @react-three/fiber    : Il s'agit d'une collection d'assistants utiles et d'abstractions prêtes à l'emploi entièrement fonctionnelles pour @react-three/fiber. @react-three/drei  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👇.    par DatSketch est sous licence   . Avant d'utiliser ce modèle dans un projet, assurez-vous de vérifier sa licence. "Apple iPhone 13 Pro Max" Creative Commons Attribution  Ouvrez le lien donné et téléchargez le modèle au format   . Pourquoi GLTF ? Selon la   de threejs,  gltf documentation 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é   dans le dossier   et extrayez tout le fichier modèle sous le dossier appelé   . assets src 3D-Model  Ouvrez le fichier   et remplacez tout le code par le css suivant. App.css   .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.  scène : Ici, vous pouvez configurer tous les objets, lumières et caméras.  caméra : Elle est utilisée pour visualiser le modèle 3D à travers différents anges.  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   et   donc nous n'avons pas faire toutes les choses à partir de zéro. @react-three/fiber @react-three/drei  Ouvrez le fichier   , nettoyez le code par défaut et importons l'élément   de   . Consultez l'extrait de code suivant. App.js canvas @react-three/fiber   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   configure la   et la   et rend la   à chaque image. Canvas scene camera scene  Copiez maintenant le code suivant dans le composant   . <Canvas />   <Canvas> <mesh> <boxGeometry /> <meshStandardMaterial /> </mesh> </Canvas>  Comprenons chacun de ces éléments.    : Un   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   et   . <mesh> mesh Geometry Material    : C'est une classe de géométrie pour un cuboïde rectangulaire avec une 'largeur', une 'hauteur' et une 'profondeur' données <boxGeometry />    : C'est un matériau physique standard. <meshStandardMaterial />  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   de   en utilisant la ligne suivante. <OrbitControls /> @react-three/drei   import { OrbitControls } from "@react-three/drei";  Rendu maintenant ce   à l'intérieur des composants   et après le   . 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   permettent à la caméra d'orbiter autour d'une cible. <OrbitControls /> <Canvas> <mesh> <OrbitControls />  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   ajoutez la ligne suivante avant le   . <Canvas /> <mesh>   <ambientLight />  Ici, cette   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   <ambientLight intensity={1.25} />  Vous pouvez également modifier la couleur de l'objet 3D en utilisant   prop dans le   . vérifier la ligne suivante. color <meshStandardMaterial />   <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   . C'est tout pour les bases pas rendu notre iPhone. threejs  Conversion du modèle en composant JSX  Ouvrez les fichiers de modèle et vous verrez différents fichiers comme   ,   ,   etc. Nous allons convertir   en un composant JSX afin que nous puissions facilement le rendre dans notre application React. textures scene.gltf scene.bin scene.gltf  Maintenant, pour convertir tous les fichiers GLTF en composant JSX, nous allons utiliser un simple outil de ligne de commande appelé   . Selon la documentation, le   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. gltfjsx gltfjsx  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   qui se trouve dans le dossier   . Je vais donc utiliser la commande suivante pour changer de répertoire. 3D-Model assets   cd src/assets/3D-Model  Utilisez maintenant la commande suivante.   npx gltfjsx scene.gltf  Cette commande prendra quelques secondes et retournera le fichier   qui est le composant JSX. Scene.js  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   pour utiliser différentes versions de NodeJs. nvm  Important!  Avant de rendre le modèle à partir du fichier   , nous devons copier les fichiers de modèle dans le répertoire   car si vous regardez dans le fichier   , il utilise le crochet   qui charge les nœuds et les matériaux à partir du fichier   . Copiez donc   ,   et   dans le dossier   de votre projet. Scene.js public Scene.js useGLTF /scene.gltf textures scene.bin scene.gltf public  Rendu du modèle 3D  Ouvrez le fichier   et supprimez le   . Importons le   à partir du fichier   . App.js <mesh> Model Scene.js   import Model from "./assets/3D-Model/Scene";  Rendu maintenant le   à l'intérieur du composant   , avant le   . <Model /> <Canvas /> <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   signifie le "champ de vision". Après avoir défini le   actualisez la page pour voir la sortie. Pour l'instant, nous avons défini le   sur 18. Vous pouvez essayer différents nombres et voir le résultat. fov fov fov  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     de la bibliothèque   . composant <Environment /> @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   du React afin qu'il puisse se charger de manière asynchrone. Suspense   <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   pour lire la documentation de   et   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. https://docs.pmnd.rs/ @react-three/fiber @react-three/drei  Si vous aimez ce didacticiel, vous devriez consulter les didacticiels géniaux que j'ai sur ma chaîne YouTube appelée   . Vous pouvez le vérifier à partir d'   . CodeBucks 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!  Également publié   . ici

The writer is smart, but don't just like, take their word for it. #DoYourOwnResearch

Polygon

Apple

Target

YouTube

Helping you to learn code! 
here you'll find tutorials around web development. Keep Coding...😜

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

About Author

COMMENTAIRES

ÉTIQUETTES

CET ARTICLE A ÉTÉ PARU DANS

Related Stories

Le modèle Bitcoin UTXO, alimentant un écosystème unique

Libérer la puissance de l’IA. Une revue systématique des techniques de pointe : résumé et introduction

Créer des produits cryptographiques centrés sur l'utilisateur : l'importance des retours clients

Les couches invisibles : pourquoi les entretiens avec les utilisateurs sont un atout irremplaçable

Le modèle Bitcoin UTXO, alimentant un écosystème unique

Libérer la puissance de l’IA. Une revue systématique des techniques de pointe : résumé et introduction

Créer des produits cryptographiques centrés sur l'utilisateur : l'importance des retours clients

Les couches invisibles : pourquoi les entretiens avec les utilisateurs sont un atout irremplaçable

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps