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

Trop long; Pour lire

People Mentioned

Companies Mentioned

Coin Mentioned

CodeBucks

STORY’S CREDIBILITY

DYOR

About Author

ÉTIQUETTES

Languages

CET ARTICLE A ÉTÉ PARU DANS...