Comment rendre des objets 3D dans une application React

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.
• 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

Three.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 crochets React personnalisés 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, découvrez comment démarrer en tant que débutant.

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

npm install three @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 fichier src/app.js , supprimez tout le code standard React et ajoutez ce qui suit :

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


function Box() {
  return (
    <mesh>
      <boxBufferGeometry attach ="geometry" />
      <meshLambertMaterial attach="material" color="hotpink" />
    </mesh>
  )
}

export default function App() {
  return (
    <div className="App">
      <div className="App-header">
        <Canvas>
          <OrbitControls />
          <ambientLight intensity ={0.5} />
          <spotLight position={[10, 15,10]} angle={0.3} />
          <Box />
        </Canvas>
      </div>
    </div>
  );
}

Ce code effectue les opérations suivantes :

• Le composant Box 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 affichez le composant app.js dans le fichier index.js et lancez un serveur de développement pour afficher les résultats dans votre navigateur à l’adresse 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 tutoriel, vous allez rendre un modèle BMW 3D par SRT performance disponible sur Sketchfab .

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 : import {useGLTF, Stage, PresentationControls} from "@react-three/drei";
• Créez le composant de modèle et ajoutez le code ci-dessous : function Model(props){
  const {scene} = useGLTF("/bmw.glb");
  return <primitive object={scene} {...props} />
}


  export default function App() {
  return (
    <div className="App">
      <div className="App-header">
        <Canvas
          dpr={[1,2]}
          shadows camera={{fav: 45}}
          style={{"position": "absolute"}}
        >
          <PresentationControls
            speed={1.5}
            global zoom={0.5}
            polar={[-0.1, Math.PI / 4]}
          >
            <Stage environment={null}>
              <Model scale={0.01} />
            </Stage>
          </PresentationControls>
        </Canvas>
      </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.