Des lecteurs comme vous aident à soutenir MUO. Lorsque vous effectuez un achat en utilisant des liens sur notre site, nous pouvons gagner une commission d'affiliation. En savoir plus.

L'introduction du rendu 3D a transformé l'interaction des utilisateurs avec les technologies Internet. Pour commencer, les applications Web sont devenues plus immersives, offrant une expérience attrayante et interactive via le navigateur Web.

Cette technologie a déjà été adoptée avec impatience par les domaines du jeu et de la réalité augmentée/virtuelle. Il offre une manière réaliste et immersive d'interagir avec des éléments virtuels.

Découvrez comment rendre des objets 3D dans une application React.

Les bases de la modélisation et de la programmation 3D

Avant de vous lancer dans le rendu 3D, vous devez connaître quelques points :

  • Les objets 3D contiennent des points individuels, ou sommets, qui définissent leur structure en trois dimensions. La jonction de ces points crée des faces qui composent la forme de l'objet à l'écran.
    • instagram viewer
  • Les navigateurs modernes ont la capacité intégrée de rendre la 3D à l'aide de technologies telles que WebGL. Pour ce faire, ils utilisent la puissance de l'unité de traitement graphique de votre machine pour restituer rapidement des modèles et des scènes 3D.
  • Tout objet 3D rendu par votre navigateur se compose de trois composants principaux. Ce sont la scène, la caméra et le rendu, et ils jouent tous un rôle crucial. La scène fournit la plate-forme de base pour configurer tous vos éléments 3D, y compris les lumières et les caméras. La caméra vous permet de visualiser l'objet 3D sous différents angles. Enfin, le moteur de rendu monte et affiche la scène au-dessus d'un élément HTML de canevas.

Rendu 3D avec Three.js et React Three Fiber

Trois.js est une bibliothèque JavaScript que vous pouvez utiliser pour afficher des objets 3D dans un navigateur Web. Grâce à ses composants intégrés, vous pouvez facilement créer et rendre des objets 3D dans votre navigateur aux côtés d'autres fonctionnalités de votre application React.

Le package react-three-fiber fonctionne au-dessus de Three.js. Il simplifie le processus d'utilisation des composants Three.js pour créer et restituer des objets 3D dans le navigateur. Fait intéressant, il fournit également des services personnalisés Crochets de réaction qui sont utiles lors de la création d'objets 3D dans React.

Rendu d'objets 3D dans une application React

Suivez les étapes ci-dessous pour rendre une forme 3D simple sur votre navigateur ainsi qu'un modèle 3D créé par Blender. Si vous n'êtes pas familier avec Blender, apprendre à démarrer en tant que débutant.

Créer une application React, lancez votre terminal pour exécuter la commande ci-dessous et installez les dépendances requises :

npm installer trois @react-three/fiber @react-three/drei

Installez les packages Three.js, react-three-fiber et react-three-drei. La bibliothèque react-three-drei fonctionne avec react-three-fiber pour créer des scènes et des objets 3D.

Rendre une forme 3D

Vous pouvez rendre une simple forme de boîte 3D dans un navigateur avec très peu de code. Ouvrez le src/app.js fichier, supprimez tout le code standard React et ajoutez ce qui suit :

importer Réagir depuis"réagir";
importer {Toile} depuis"@react-three/fibre";
importer {OrbitControls} depuis"@réagir-trois/drei";
fonctionBoîte() {
retour (
<engrener>
<boxBufferGeometryattacher ="géométrie" />
<maillageLambertMatériauattacher="matériel"couleur="rose vif" />
engrener>
 )
}
exporterdéfautfonctionApplication() {
retour (
<divnom du cours="Application">
<divnom du cours="App-header">
<Toile>
<OrbitControls />
<lumière ambianteintensité ={0.5} />
<projecteurposition={[10,15,10]} angle={0.3} />
<Boîte />
Toile>
div>
div>
 );
}

Ce code effectue les opérations suivantes :

  • Le Boîte Le composant utilise les composants mesh, boxBufferGeometry et meshLambertMaterial de react-three-fiber pour restituer une boîte 3D. Ces trois composants travaillent main dans la main pour créer la forme de la boîte.
  • Le composant boxBufferGeometry crée la boîte et ce code définit la propriété color du composant meshLambertMaterial sur rose vif.
  • Il rend ensuite l'élément Canvas qui abrite le composant de boîte avec la lumière ambiante, un projecteur et le jeu de propriétés du composant Orbit Controls.
  • La propriété de composant de lumière ambiante ajoute une lumière douce au canevas. Le composant spotLight ajoute une lumière focalisée à partir d'une position spécifique avec un angle de 0,3. Enfin, le composant OrbitControls vous permet de contrôler la caméra autour de l'objet 3D.

Importez et rendez le composant app.js dans le fichier index.js et lancez un serveur de développement pour afficher les résultats dans votre navigateur à http://localhost: 3000.

Rendre un modèle 3D créé par Blender

Blender est un outil open source utilisé par les créatifs dans différents domaines pour créer des modèles 3D, des effets visuels et des applications 3D interactives. Vous pouvez utiliser Blender pour créer des modèles 3D pour votre application Web.

Pour ce didacticiel, vous allez rendre un modèle BMW 3D par les performances SRT disponible sur Fabriquer des croquis.

Crédit: RadeonGamer/ Fabriquer des croquis
Attribution Creative Commons

Pour commencer, téléchargez le modèle de Sketchfab au format GLTF (format de transmission GL). Ce format facilite le rendu des modèles 3D sur le navigateur. Une fois le téléchargement terminé, ouvrez le dossier du modèle et déplacez le fichier du modèle dans le répertoire public de votre application React.

Maintenant, dirigez-vous vers votre fichier app.js et remplissez-le avec le code ci-dessous.

  • Importez les composants suivants: 
    importer {useGLTF, Stage, PresentationControls} depuis"@réagir-trois/drei";
  • Créez le composant de modèle et ajoutez le code ci-dessous: 
    fonctionModèle(accessoires){
    constante {scène} = useGLTF("/bmw.glb");
    retour<primitifobjet={scène} {...accessoires} />
    }
    exporterdéfautfonctionApplication() {
    retour (
    <divnom du cours="Application">
    <divnom du cours="App-header">
     dpr={[1,2]} 
     caméra d'ombres={{fav: 45}}
     style={{"position": "absolu"}}
     >
     vitesse={1.5} 
    mondial agrandir={0.5}
     polaire={[-0.1, Mathématiques.PI / 4]}
     >
    <Organiserenvironnement={nul}>
    <Modèleescalader={0.01} />
    Organiser>
    PresentationControls>
    Toile>
    div>
    div>
     );
    }
  • Le crochet useGLTF de la bibliothèque React-three-drei définit une variable de scène et lui attribue la valeur du fichier de modèle situé au chemin "/bmw.glb". Le composant renvoie ensuite un objet primitif qui prépare la scène pour le modèle 3D.
  • L'élément Canvas restitue les composants principaux qui composent le modèle, avec les propriétés spécifiées, telles que le taux de pixels de l'appareil (DPR), les ombres, l'angle de la caméra et le style.
  • Vous spécifiez ensuite les propriétés du composant PresentationControls telles que la vitesse et le zoom global. Ces propriétés définissent la manière dont vous contrôlerez le modèle à l'écran.
  • Enfin, configurez le composant Stage qui monte le modèle sur l'écran du navigateur.

Lancez le serveur de développement pour mettre à jour les modifications apportées à votre application. Vous devriez voir le modèle rendu sur votre navigateur.

Rendu de modèles 3D dans votre application Web

Le rendu de modèles 3D dans vos applications Web peut offrir plusieurs avantages, comme l'amélioration de l'expérience utilisateur en offrant une sensation 3D plus réaliste et interactive. En conséquence, les utilisateurs peuvent mieux interagir avec le produit.

Cependant, le rendu des éléments 3D peut avoir ses inconvénients, comme affecter négativement les performances de l'application. Les modèles 3D nécessitent plus de ressources pour le rendu, ce qui peut ralentir le chargement de votre application.