Até agora, criamos muitas cenas 3D, mas exibimos apenas uma de cada vez, ocupando toda a página.

Nesta lição, aprenderemos como integrar várias cenas 3D em uma única página HTML, assim como você poderia adicionar imagens, vídeos ou qualquer outro elemento HTML ao seu site.

Projeto inicial

Para esta lição, criaremos uma página de destino para uma agência de desenvolvimento web 3D fictícia.

O starter pack contém uma página simples e responsiva pronta para uso, contendo as seguintes seções: Home, Serviços, Equipe, Portfólio e Contato.

Esta é uma página HTML padrão contendo conteúdo indexável para mecanismos de busca e acessibilidade, que iremos aprimorar e ilustrar com conteúdo 3D.

A página de destino sem conteúdo 3D

View

Para criar e renderizar várias cenas 3D em nossa página, utilizaremos o View component da biblioteca Drei.

Ao usá-lo, podemos usar apenas um componente Canvas e renderizar várias cenas independentes (views) dentro dele. Isto é muito útil pois nos permite usar apenas um contexto WebGL e evitar problemas de desempenho.

Estas views estão vinculadas a um elemento HTML alvo e podem ser posicionadas e dimensionadas de forma independente, enquanto reagem adequadamente a eventos de toque, mouse, rolagem e redimensionamento.

Canvas

Para preparar nossa página para conteúdo 3D, vamos criar nosso componente Canvas usual no topo do 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>
  );
};

A classe canvas é usada para estilizar o canvas e fazê-lo ocupar toda a página. Ela já está definida no arquivo index.css.

Rastreamento

O projeto inicial contém componentes de cena 3D que usaremos para ilustrar as diferentes seções da página.

Vamos adicionar o componente da seção inicial:

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

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