In questa lezione, scopriremo quali sono gli hook useThree e useFrame forniti da React Three Fiber, e come e quando utilizzarli.

useThree

useThree dà accesso al modello state che contiene il renderer predefinito, la scena, la camera, la dimensione del viewport e così via.

Mentre spiegherò ciascuna delle proprietà dello state che utilizzeremo al momento opportuno, puoi trovare l'elenco completo delle proprietà nella documentazione.

Per utilizzarlo, dobbiamo importarlo da @react-three/fiber, e quindi chiamarlo all'interno del nostro componente:

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

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

// ...

Sebbene questo modo di usare useThree funzioni, causerà il re-render del componente al cambiamento di altri valori diversi da quelli ottenuti dal destructuring.

Invece, possiamo utilizzare il pattern del selector per ottenere solo i valori di cui abbiamo bisogno:

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

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

In questo modo, il componente si rigenererà solo quando il valore camera cambierà.

Tieni presente che i valori interni di threejs non sono reattivi. Se cambia camera.position, il componente non si rigenererà. (Fortunatamente)

Ora che abbiamo accesso alla camera, possiamo modificare il fov (campo visivo) per ingrandire o ridurre:

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)),
  });

  // ...
};

// ...

Note:

• il metodo updateProjectionMatrix è necessario per comunicare a threejs che la camera è cambiata e deve essere aggiornata.
• passando un valore stringa come primo parametro a useControls, possiamo raggruppare le proprietà per cartella.

Il nostro campo visivo della camera viene aggiornato correttamente dai controlli

useFrame

Threejs è una libreria basata su render-loop. Significa che ciò che vediamo sullo schermo è il risultato di un ciclo che renderizza la scena ad ogni frame. Come un video è una successione di immagini, una scena 3D è una successione di frame.

Il hook useFrame ci consente di eseguire codice su ogni frame renderizzato, come eseguire effetti, aggiornare controlli e animazioni.

Quando si punta ai 60fps, il callback sarà invocato 60 volte al secondo.