En esta lección, descubriremos qué son los hooks useThree y useFrame proporcionados por React Three Fiber, cómo y cuándo usarlos.

useThree

useThree da acceso al modelo state que contiene el renderer predeterminado, la escena, la cámara, el tamaño del viewport, etc.

Aunque explicaré cada una de las propiedades del state que utilizaremos en el momento adecuado, puedes encontrar la lista completa de propiedades en la documentación.

Para usarlo, necesitamos importarlo desde @react-three/fiber y luego llamarlo dentro de nuestro componente:

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

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

// ...

Aunque esta forma de usar useThree funciona, causará que el componente se vuelva a renderizar en otros cambios de valores diferentes a los que obtuvimos mediante destructuring.

En su lugar, podemos usar el patrón de selector para obtener solo los valores que necesitamos:

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

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

De esta manera, el componente solo se volverá a renderizar cuando el valor camera cambie.

Ten en cuenta que los valores internos de threejs no son reactivos. Si la camera.position cambia, el componente no se volverá a renderizar. (Afortunadamente)

Ahora que tenemos acceso a la cámara, podemos modificar el fov (campo de visión) para acercar o alejar:

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:

• El método updateProjectionMatrix es necesario para decirle a threejs que la cámara ha cambiado y necesita ser actualizada.
• Al pasar un valor de cadena como primer parámetro a useControls, podemos agrupar propiedades por carpeta.

Nuestro campo de visión de la cámara se actualiza correctamente desde los controles

useFrame

Threejs es una biblioteca basada en un render-loop. Esto significa que lo que vemos en la pantalla es el resultado de un bucle que renderiza la escena en cada frame. Así como un video es una sucesión de imágenes, una escena 3D es una sucesión de frames.

El hook useFrame nos permite ejecutar código en cada frame renderizado, como ejecutar efectos, actualizar controles y realizar animaciones.

Cuando se apunta a 60fps, el callback se invocará 60 veces por segundo.