Jusqu'à présent, les expériences 3D que nous avons construites contenaient uniquement un élément canvas HTML où nos scènes 3D Three.js étaient rendues.

Il y a deux façons de rendre nos expériences plus interactives :

• Construisez votre page HTML comme vous le faites habituellement et ajoutez votre scène 3D en tant qu'arrière-plan dans un canvas plein écran. Ensuite, intégrez-les bien en les connectant via des événements de souris ou le défilement de page. Nous verrons comment y parvenir dans la section scroll de la leçon sur les animations.
• Ajoutez des éléments HTML comme s'ils étaient des objets 3D dans nos scènes 3D. C'est ce que nous verrons dans cette leçon.

Ces deux approches ne sont pas mutuellement exclusives. Vous pouvez les combiner pour créer des expériences immersives.

Showroom en ligne Ikea

Pour cette leçon, imaginons que nous voulons créer un showroom en ligne pour Ikea. Le pack de démarrage contient divers modèles 3D de meubles de cuisine (Tous provenant de Quaternius sur Poly Pizza, merci 🙏).

Ceci est ce que nous avons jusqu'à présent. Une cuisine de style japonais.

Nous essaierons d'ajouter des étiquettes sur les meubles de cuisine pour afficher le nom et le prix de chaque article.

Avant de le faire, laissez-moi vous expliquer certaines parties du pack de démarrage.

Pour rendre le code générique, au lieu de déclarer chaque article manuellement et de réécrire la logique de chargement et de positionnement, j'ai créé un tableau d'éléments.

Copy
const sceneItems = [
  {
    model: "Japanese Door.glb",
    position: [0, -0.88, -1.2],
    scale: 1.8,
  },
  {
    model: "Counter Sink.glb",
    position: [1.3, 0, -2.8],
  },
  {
    model: "Chopping board.glb",
    position: [2.8, 1.9, -2.8],
    scale: 0.5,
  },
  {
    model: "Fridge.glb",
    position: [-2.1, 0, -3],
  },
  {
    model: "Table.glb",
    position: [-1, 0, 2],
    scale: [1, 1, 1],
  },
  {
    model: "Dango.glb",
    position: [-1.4, 1.64, 2],
    scale: 0.72,
    rotation: [0, Math.PI / 6, 0],
  },
];

Ensuite, j'ai créé un composant générique appelé Item qui prend le chemin du modèle et les autres props de transformation (position, rotation, scale...) :

Copy
const Item = ({ model, position, rotation, ...props }) => {
  const gltf = useGLTF(`models/${model}`);

  return (
    <group position={position} rotation={rotation}>
      <primitive object={gltf.scene} {...props} />
    </group>
  );
};

Le composant se charge de charger le modèle 3D et de le positionner dans la scène. J'ai choisi un groupe comme élément racine pour pouvoir ajouter plus tard des éléments HTML en tant qu'enfants.

Ensuite, on boucle à travers le tableau d'éléments et on rend un composant Item pour chaque élément :

Copy
export const Experience = () => {
  return (
    <>
      {sceneItems.map((item, index) => {
        return <Item key={index} {...item} />;
      })}
    </>
  );
};

Éléments HTML en 3D

Maintenant que nous avons un composant générique capable de rendre n'importe quel modèle 3D et de le positionner dans la scène, nous pouvons nous concentrer sur nos étiquettes de meubles.

Ajoutons plus d'informations à notre tableau d'items en ajoutant une propriété label et price :

Copy
const sceneItems = [
  {
    model: "Japanese Door.glb",
    position: [0, -0.88, -1.2],
    scale: 1.8,
    name: "Hemnes",
    price: 300,
  },
  {
    model: "Counter Sink.glb",
    position: [1.3, 0, -2.8],
    name: "Lillången",
    price: 450,
  },
  {
    model: "Chopping board.glb",
    position: [2.8, 1.9, -2.8],
    scale: 0.5,
    name: "Skogsta",
    price: 25,
  },
  {
    model: "Fridge.glb",
    position: [-2.1, 0, -3],
    name: "Lagan",
    price: 600,
  },
  {
    model: "Table.glb",
    position: [-1, 0, 2],
    scale: [1, 1, 1],
    name: "Lerhamn",
    price: 80,
  },
  {
    model: "Dango.glb",
    position: [-1.4, 1.64, 2],
    scale: 0.72,
    rotation: [0, Math.PI / 6, 0],
    name: "Dango",
    price: 4,
  },
];

Ne soyez pas offensé par les noms et les prix, ils sont générés par GitHub Copilot...

Nous pouvons maintenant mettre à jour notre composant Item pour obtenir les props name et price et les rendre en tant qu'éléments HTML :