Para posicionar e animar a câmera em uma cena 3D, descobrimos algumas maneiras de fazer isso:

• Definindo manualmente a posição e rotação da câmera.
• Usando diferentes tipos de controles, como OrbitControls.

Mas, às vezes, precisamos de mais controle sobre a câmera, e isso requer muito código e cálculo para acertar. Felizmente, existem bibliotecas que podem nos ajudar com isso.

A que vamos usar é chamada de camera-controls. É uma pequena biblioteca que nos permite realizar uma variedade de movimentos e animações de câmera de forma muito fácil.

Por coincidência, Drei tem um wrapper para esta biblioteca, então podemos usá-la com poucas linhas de código.

Projeto inicial

Para descobrir os diferentes recursos desta biblioteca, vamos criar um belo slider 3D para mostrar o novo iPhone 15 Pro Max Black.

Por favor, entre em contato comigo quando o iPhone 16 for lançado para que eu possa atualizar esta lição 🤭

O projeto inicial contém:

• Modelo do Apple iPhone 15 Pro Max Black por polyman. Licenciado sob Creative Commons Attribution.
• Um componente UI contendo um slider feito com Tailwind CSS que adicionaremos mais tarde ao projeto.

Por enquanto, só podemos ver o modelo do iPhone

Vamos começar a brincar com os controles da câmera.

Controles

Para habilitar os controles da câmera, precisamos substituir o OrbitControls já presente no projeto inicial pelo componente CameraControls do Drei.

Também adicionaremos uma referência ao controle para podermos acessá-lo mais tarde e usar seus métodos.

Experience.jsx:

Copy
// ...
import { CameraControls } from "@react-three/drei";
import { useRef } from "react";

export const Experience = () => {
  const controls = useRef();
  return (
    <>
      <CameraControls ref={controls} />
      {/* ... */}
    </>
  );
};

Ao fazer isso, não podemos notar qualquer diferença significativa com o OrbitControls. Ainda podemos girar, deslocar e dar zoom na câmera.

A API também possui muitos controles em comum, como a distance, zoom, polarAngle, azimuthAngle, ...

Onde o componente CameraControls se destaca é quando queremos animar a câmera.

Não passaremos por todos os controles disponíveis, mas veremos os mais comuns. Você pode encontrar a lista completa na documentação do camera-controls.

Dolly

O controle dolly nos permite mover a câmera para frente e para trás.

Vamos usar Leva para adicionar botões que movem a câmera para frente e para trás:

Copy
// ...
import { button, useControls } from "leva";

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

  useControls("dolly", {
    in: button(() => {
      controls.current.dolly(1, true);
    }),
    out: button(() => {
      controls.current.dolly(-1, true);
    }),
  });
  // ...
};

O primeiro argumento do método dolly é a distância que queremos mover a câmera. O segundo argumento é um booleano que indica se queremos ou não animar o movimento.

Nossa câmera agora pode mover-se para frente e para trás

Se quiséssemos alcançar o mesmo resultado com o OrbitControls, teríamos que calcular a nova posição da câmera e o alvo. Então, teríamos que animar a câmera e o alvo para suas novas posições.

Truck

O controle truck permite que movamos a câmera para cima, baixo, esquerda e direita sem alterar a orientação da câmera.

Como fizemos com o controle dolly, vamos adicionar botões para experimentar o controle truck:

Copy
// ...

export const Experience = () => {
  // ...
  useControls("truck", {
    up: button(() => {
      controls.current.truck(0, -0.5, true);
    }),
    left: button(() => {
      controls.current.truck(-0.5, 0, true);
    }),
    down: button(() => {
      controls.current.truck(0, 0.5, true);
    }),
    right: button(() => {
      controls.current.truck(0.5, 0, true);
    }),
  });
  // ...
};

Os dois primeiros argumentos do método truck são as distâncias horizontal e vertical que queremos mover a câmera. O terceiro argumento é um booleano que indica se queremos animar o movimento ou não.

Você pode usar diferentes valores para as distâncias horizontal e vertical para mover a câmera na diagonal.

Girar

Camera Controls fornecem uma maneira de girar programaticamente a câmera ao redor do seu alvo, semelhante ao movimento que fazemos quando arrastamos o mouse com o OrbitControls.

Vamos adicionar botões para girar a câmera ao redor do seu alvo:

Copy
// ...

export const Experience = () => {
  // ...
  useControls("rotate", {
    up: button(() => {
      controls.current.rotate(0, -0.5, true);
    }),
    down: button(() => {
      controls.current.rotate(0, 0.5, true);
    }),
    left: button(() => {
      controls.current.rotate(-0.5, 0, true);
    }),
    right: button(() => {
      controls.current.rotate(0.5, 0, true);
    }),
  });
  // ...
};

Os argumentos do método rotate são:

• azimuthAngle: o ângulo horizontal em radianos.
• polarAngle: o ângulo vertical em radianos.
• enableTransition: um booleano que indica se queremos animar o movimento ou não.

Tempo suave

Para controlar o tempo de animação quando usamos o argumento enableTransition, podemos usar a propriedade smoothTime.