Jusqu'à présent, nous avons créé de nombreuses scènes 3D, mais nous n'en avons affiché qu'une seule à la fois prenant toute la page.

Dans cette leçon, nous allons apprendre à intégrer plusieurs scènes 3D dans une seule page HTML, comme vous pourriez ajouter des images, des vidéos ou tout autre élément HTML à votre site web.

Projet de départ

Pour cette leçon, nous allons créer une page d'accueil pour une agence fictive de développement web en 3D.

Le pack de départ contient une page simple et prête à l'emploi, responsive, contenant les sections suivantes : Accueil, Services, Équipe, Portfolio, et Contact.

Il s'agit d'une page HTML standard contenant du contenu indexable pour les moteurs de recherche et l'accessibilité que nous allons améliorer et illustrer avec du contenu 3D.

La page d'accueil sans contenu 3D

View

Pour créer et rendre plusieurs scènes 3D dans notre page, nous allons utiliser le View component de la bibliothèque Drei.

En l'utilisant, nous pouvons utiliser un seul composant Canvas et rendre plusieurs scènes indépendantes (views) à l'intérieur. Ceci est très utile car cela nous permet d'utiliser un seul contexte WebGL et d'éviter des problèmes de performance.

Ces views sont liées à un élément HTML cible et peuvent être positionnées et dimensionnées indépendamment tout en réagissant correctement aux événements de toucher, de souris, de défilement et de redimensionnement.

Canvas

Pour préparer notre page pour le contenu 3D, créons notre composant Canvas habituel en haut de l'élément main.

HomePage.jsx :

Copy
// ...
import { Canvas } from "react-three-fiber";

export const HomePage = () => {
  // ...

  return (
    <main>
      <Canvas
        className="canvas"
        camera={{ position: [0, 0, 1.5], fov: 30 }}
      ></Canvas>
      {/* ... */}
    </main>
  );
};

La classe canvas est utilisée pour styliser le canvas et le faire occuper toute la page. Elle est déjà définie dans le fichier index.css.

Suivi

Le projet de démarrage contient des composants de scène 3D que nous utiliserons pour illustrer les différentes sections de la page.

Ajoutons celui de la section d'accueil :

Copy
import { Hero3D } from "./Hero3D";

export const HomePage = () => {
  // ...
  return (
    <main>
      <Canvas className="canvas" camera={{ position: [0, 0, 1.5], fov: 30 }}>
        <Hero3D />
      </Canvas>
      {/* ... */}
    </main>
  );
};