Troisjs l’avenir du développement Web 3D / blogs / perficient

De nos jours, les clients et les utilisateurs sont plus exigeants, ils veulent des pages Web réactives, réactives et conviviales où ils peuvent interagir et «ressentir» une expérience comme dans le monde réel. C’est quand trois.js arrivent dans un endroit, faisant passer le développement Web au niveau supérieur.

Trois.js

Three.js est une bibliothèque JavaScript et interface (API) de la bibliothèque de programmation d’application (API) du framework utilisé, pour créer et afficher des graphiques informatiques 3D animés dans un navigateur Web à l’aide de l’API WebGL. Mais pourquoi devrions-nous l’utiliser si nous avons déjà une API WebGL? Cela a une réponse facile: la complexité. WebGL est une API de bas niveau, ce qui signifie que, fondamentalement, nous devons faire presque tout à partir de zéro, le calcul de la lumière, le chargement du modèle, les vecteurs et un long etc., tandis que, d’autre part, trois.js font tout cela pour vous.

En effet, c’est une API de haut niveau et qu’elle résume beaucoup de ces choses pour rendre le développement plus facile et convivial, cela nous permet de nous concentrer sur ce dont nous avons vraiment besoin: la productivité et la qualité. Il a un large éventail de fonctionnalités, y compris, mais sans s’y limiter, les lumières, les matériaux, les modèles 3D, la caméra et les scènes qui sont celles que nous avons utilisées sur ce concept pratique

Une réalité réelle

Pour démontrer les capacités de cette API, nous avons essayé de trouver une utilisation réelle, après avoir examiné différentes options, nous avons constaté qu’il peut être utilisé pour améliorer le processus d’achat d’une voiture. Parfois, ce processus est vaste et difficile à faire en ligne. Généralement, une personne qui fait un achat de voiture doit aller directement chez le concessionnaire, ce qui sonne bien jusqu’à ce que quelques autres problèmes apparaissent: que se passe-t-il s’il n’y a pas de concessionnaire dans ma ville? Ou pire encore, que se passe-t-il si le modèle n’est pas encore disponible dans mon pays? Il est logique d’attendre des mois juste pour voir si j’aime la voiture, la couleur ou l’intérieur? Absolument pas.

Comment le processus a été amélioré

Après avoir examiné les domaines d’amélioration, notre objectif s’est transformé en trouvant un moyen d’ajouter de la valeur à l’utilisateur final et, également, à nos clients / clients. Nous avons recherché chaque rôle et leurs besoins dans ce contexte et avons constaté que ce dont l’utilisateur final a vraiment besoin, c’est de voir sa voiture dans son état final avant d’acheter afin qu’ils puissent prendre une décision finale; Et du côté client, il veut s’assurer que l’utilisateur final est satisfait du produit final en fournissant un aperçu de ce qu’il obtiendra une fois le processus d’achat finalisé.

Dans la deuxième itération, l’accent a changé pour une expérience de personnalisation où l’utilisateur peut, en temps réel, modifier les fonctionnalités des voitures comme la couleur, les matériaux, les kits de voiture, la couleur intérieure, etc.

Une vue technique de trois.js

Matériels:

Les matériaux sont cartographiés sur le modèle 3D lui-même, et il peut être cartographié sur différentes parties, puis nous pouvons les modifier avec le nôtre, c’est un exemple de la façon dont nous pouvons le faire

Tout d’abord, nous chargeons le modèle

const { nodes, materials } = useGLTF('/model/2015_bugatti_atlantic_-_concept_car.glb') as GLTFResult;

Ensuite, nous cartographions les matériaux du modèle avec nos propres noms, cela nous permet d’identifier facilement le matériau fait référence à ce qui dans le modèle

const mappedMaterials = {
    carpet: materials.Bugatti_AtlanticConcept_2015BadgeA_Material,
    upholstery: materials.Bugatti_AtlanticConcept_2015Carbon1M_Material,
    grill: materials.Bugatti_AtlanticConcept_2015Grille1A_Material,
    zippers: materials.Bugatti_AtlanticConcept_2015Grille2A_Material,
    doorPanel: materials.Bugatti_AtlanticConcept_2015Grille4A_Material,
    carPaint: carPaint,
    grillDoor: materials.Bugatti_AtlanticConcept_2015Grille5A_Material,
    trunk: materials.Bugatti_AtlanticConcept_2015InteriorColourZoneA_Material,
    interior: materials.Bugatti_AtlanticConcept_2015InteriorA_Material,
    lights: materials.Bugatti_AtlanticConcept_2015LightA_Material,
    plate: materials.Bugatti_AtlanticConcept_2015ManufacturerPlateA_Material,
    belt: materials.PaletteMaterial003,
    frontGrill: materials.Bugatti_AtlanticConcept_2015TexturedA_Material,
    rims: materials.Bugatti_AtlanticConcept_2015_Wheel1A_3D_3DWheel1A_Material,
    brakes: materials.Bugatti_AtlanticConcept_2015_CallipersCalliperA_Zone_Material,
    borderWindows: materials.PaletteMaterial006,
    jointsChasis: materials.PaletteMaterial007,
    gloveHandle: materials.Bugatti_AtlanticConcept_2015Grille3A_Material,
};

Enfin, nous pouvons modifier chaque matériel comme nous le souhaitons:

mappedMaterials.brakes.color = new THREE.Color(paint.color);
mappedMaterials.rims.color = new THREE.Color(rimsPaint.color);
mappedMaterials.jointsChasis.color = new THREE.Color(rimsPaint.color);

Caméras et scène

Ici, nous chargeons l’endroit où nos modèles 3D vont être affichés, c’est ce que nous appelons la scène

<Environment
    files="/environment/rooftop_day_2k.hdr"
    ground={{ height, radius, scale }}
    environmentIntensity={0.7}
/>

Ici, je veux clarifier quelque chose, nous avons dit que trois.js sont agnostiques dans le cadre, alors peut-être que vous pouvez vous demander pourquoi la scène / l’environnement ressemble à un composant React, c’est parce que nous utilisons une bibliothèque qui facilite la mise en œuvre de React, car notre application est faite dans ce cadre. Cette bibliothèque s’appelle Three Fibre, et nous aurons l’occasion d’en parler sur un autre blog, mais ce que vous devez savoir pour l’instant, c’est que cette bibliothèque convertit Three.js fonctionne en composants React pour rendre le développement plus facile et lisible.

Ensuite, nous chargeons le modèle 3D et nos caméras dans ce cas, nous avons 2 caméras. En quelques mots, une caméra est le point de l’écran où l’utilisateur va examiner notre scène

<BugattiCarOptimized scale={carScale} rotation-y={rotationY} />
<PerspectiveCamera
    makeDefault={isExternalCamera}
    position={[
       externalPosition.cameraPositionX,
       externalPosition.cameraPositionY,
       externalPosition.cameraPositionZ,
    ]}
    near={cameraNear}
    far={cameraFar}
    rotation={[externalPosition.cameraRotateX, externalPosition.cameraRotateY, externalPosition.cameraRotateZ]}
/>

Enfin, nous ajoutons nos lumières, il est important de savoir que l’ajout de lumières est un must, sans eux, tout ce que nous allons voir est un écran noir sans rien

<directionalLight position={[5, 10, 12]} intensity={1} castShadow shadow-mapSize={[1024, 1024]} />

Nous emballons tous ces éléments dans le composant de la scène comme dans React, alors tout devrait ressembler à ceci:

return (
    <>
      <Environment
        files="/environment/rooftop_day_2k.hdr"
        ground={{ height, radius, scale }}
        environmentIntensity={0.7}
      />
      <BugattiCarOptimized scale={carScale} rotation-y={rotationY} />
      <ContactShadows
        renderOrder={2}
        frames={1}
        resolution={1024}
        scale={shadowScale}
        blur={1}
        opacity={0.7}
        near={shadowNear}
        far={shadowFar}
        position={[0.2, 0, -0.05]}
      />
      <PerspectiveCamera
        makeDefault={isExternalCamera}
        position={[
          externalPosition.cameraPositionX,
          externalPosition.cameraPositionY,
          externalPosition.cameraPositionZ,
        ]}
        near={cameraNear}
        far={cameraFar}
        rotation={[externalPosition.cameraRotateX, externalPosition.cameraRotateY, externalPosition.cameraRotateZ]}
      />
      <PerspectiveCamera
        makeDefault={!isExternalCamera}
        position={[
          internalPosition.cameraPositionX,
          internalPosition.cameraPositionY,
          internalPosition.cameraPositionZ,
        ]}
        near={cameraNear}
        far={cameraFar}
        rotation={[internalPosition.cameraRotateX, internalPosition.cameraRotateY, internalPosition.cameraRotateZ]}
      />

      {showEffects && <BaseEffect />}
      {import.meta.env.DEV && (
        <>
          {/*<OrbitControls />*/}
          <Perf position="top-left" />
        </>
      )}
      <directionalLight position={[5, 10, 12]} intensity={1} castShadow shadow-mapSize={[1024, 1024]} />
    </>
  );

C’est la vue d’ensemble de la mise en œuvre générale, il y a certaines choses que nous n’avons pas expliquées car le blog serait trop long, mais j’ai essayé d’expliquer les choses les plus importantes. Vient maintenant la partie la plus excitante.

Le résultat

Étapes suivantes

L’utilisateur doit se sentir en contrôle, mais ne se sent pas non plus submergé par toutes les différentes options qui peuvent exister. En raison de cela, nous voulons inclure un agent d’IA qui, selon certains choix d’utilisateurs, sous forme, il créera et personnalisera la voiture pour simplifier une partie du processus, donnant à l’utilisateur final une voiture de base pour commencer à travailler, ou une voiture d’État finale qui correspond à l’utilisateur. Après ce processus, l’utilisateur pourra télécharger le véhicule personnalisé ou partager avec l’équipe de vente le modèle 3D final, avec son résumé de devis et d’achat respectif, c’est pour que l’équipe de vente puisse entrer en contact avec l’utilisateur dès que possible.

Écrit en collaboration avec Miguel Naranjo, Sebastian Corrales et Sebastian Castillo.