Nesta lição, vamos descobrir o que são os hooks useThree e useFrame fornecidos pelo React Three Fiber, como e quando usá-los.

useThree

useThree dá acesso ao modelo de state, que contém o renderizador padrão, a cena, a câmera, o tamanho do viewport, e assim por diante.

Enquanto vou explicar cada propriedade do state que usaremos no momento apropriado, você pode encontrar a lista completa de propriedades na documentação.

Para usá-lo, precisamos importá-lo de @react-three/fiber, e então chamá-lo dentro do nosso componente:

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

const Cube = (props) => {
  const { camera } = useThree();
  // ...
};

// ...

Embora essa maneira de usar useThree funcione, ela fará com que o componente seja re-renderizado em outras mudanças de valores além daqueles que obtivemos a partir da desestruturação.

Em vez disso, podemos usar o padrão de selector para obter apenas os valores de que precisamos:

Copy
import { Canvas, useThree } from "@react-three/fiber";

const Cube = (props) => {
  const camera = useThree((state) => state.camera);
  // ...
};

Dessa forma, o componente será re-renderizado apenas quando o valor da camera mudar.

Lembre-se de que os valores internos do threejs não são reativos. Se o camera.position mudar, o componente não será re-renderizado. (Felizmente)

Agora que temos acesso à câmera, podemos modificar o fov (campo de visão) para aumentar ou diminuir o zoom:

Copy
// ...

const Cube = (props) => {
  const camera = useThree((state) => state.camera);

  const updateFov = (fov) => {
    camera.fov = fov;
    camera.updateProjectionMatrix();
  };

  useControls("FOV", {
    smallFov: button(() => updateFov(20)),
    normalFov: button(() => updateFov(42)),
    bigFov: button(() => updateFov(60)),
    hugeFov: button(() => updateFov(110)),
  });

  // ...
};

// ...

Notas:

• o método updateProjectionMatrix é necessário para informar ao threejs que a câmera foi alterada e precisa ser atualizada.
• ao passar um valor de string como primeiro parâmetro para useControls, podemos agrupar propriedades por pasta.

O nosso Campo de Visão da câmera é corretamente atualizado a partir dos controles

useFrame

Threejs é uma biblioteca baseada em render-loop. Isso significa que o que vemos na tela é o resultado de um loop que renderiza a cena a cada frame. Assim como um vídeo é uma sucessão de imagens, uma cena 3D é uma sucessão de frames.

O hook useFrame nos permite executar código em cada frame renderizado, como rodar efeitos, atualizar controles e animações.

Quando o alvo é 60fps, o callback será invocado 60 vezes por segundo.