Hasta ahora hemos creado muchas escenas 3D, pero solo hemos mostrado una a la vez y ocupando toda la página.

En esta lección aprenderemos cómo integrar múltiples escenas 3D dentro de una sola página HTML, tal como podrías añadir imágenes, videos o cualquier otro elemento HTML a tu sitio web.

Proyecto inicial

Para esta lección crearemos una página de aterrizaje para una agencia ficticia de desarrollo web 3D.

El pack inicial contiene una página simple y lista para usar responsiva que contiene las siguientes secciones: Inicio, Servicios, Equipo, Portafolio y Contacto.

Esta es una página HTML estándar que contiene contenido indexable para motores de búsqueda y accesibilidad que mejoraremos e ilustraremos con contenido 3D.

La página de aterrizaje sin contenido 3D

Vista

Para crear y renderizar múltiples escenas 3D en nuestra página utilizaremos el componente View de la biblioteca Drei.

Usándolo, podemos utilizar solo un componente Canvas y renderizar múltiples escenas independientes (vistas) dentro de él. Esto es muy útil ya que nos permite usar solo un contexto WebGL y evitar problemas de rendimiento.

Estas vistas están vinculadas a un elemento HTML objetivo y pueden ser posicionadas y dimensionadas de manera independiente, reaccionando adecuadamente a eventos de tacto, ratón, desplazamiento y cambio de tamaño.

Canvas

Para preparar nuestra página para contenido 3D, vamos a crear nuestro componente Canvas habitual en la parte superior del elemento 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 clase canvas se utiliza para dar estilo al canvas y hacer que ocupe toda la página. Ya está definida en el archivo index.css.

Tracking

El proyecto inicial contiene componentes de escena 3D que utilizaremos para ilustrar las diferentes secciones de la página.

Vamos a añadir uno para la sección de inicio:

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

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