Dans cette leçon, nous découvrirons ce que sont les hooks useThree et useFrame fournis par React Three Fiber, comment et quand les utiliser.

useThree

useThree donne accès au modèle state qui contient le renderer par défaut, la scène, la caméra, la taille du viewport, etc.

Bien que j'expliquerai chaque propriété du state que nous utiliserons au moment approprié, vous pouvez trouver la liste complète des propriétés dans la documentation.

Pour l'utiliser, nous devons l'importer depuis @react-three/fiber, puis l'appeler dans notre composant :

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

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

// ...

Bien que cette façon d'utiliser useThree fonctionne, elle provoquera le re-render du composant lors de changements d'autres valeurs que celles obtenues par destructuration.

Nous pouvons plutôt utiliser le pattern selector pour obtenir uniquement les valeurs dont nous avons besoin :

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

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

De cette façon, le composant se re-rendera uniquement lorsque la valeur de la camera change.

Gardez à l'esprit que les valeurs internes de threejs ne sont pas réactives. Si la camera.position change, le composant ne se re-rendera pas. (Heureusement)

Maintenant que nous avons accès à la caméra, nous pouvons modifier le fov (champ de vision) pour zoomer ou dézoomer :

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

  // ...
};

// ...

Notes :

• la méthode updateProjectionMatrix est nécessaire pour indiquer à threejs que la caméra a changé et doit être mise à jour.
• en passant une valeur string comme premier paramètre à useControls, nous pouvons regrouper les propriétés par dossier.

Notre champ de vision de la caméra est correctement mis à jour depuis les contrôles

useFrame

Threejs est une bibliothèque basée sur un render-loop. Cela signifie que ce que nous voyons à l'écran est le résultat d'une boucle qui rend la scène à chaque frame. Tout comme une vidéo est une succession d'images, une scène 3D est une succession de frames.

Le hook useFrame nous permet d'exécuter du code à chaque frame rendue, comme lancer des effets, mettre à jour des contrôles, et des animations.

Lorsqu'on cible 60fps, le callback sera invoqué 60 fois par seconde.