Dans les graphismes 3D, il peut être difficile de comprendre ce qui se passe dans la scène. Rappelez-vous, nous voyons un monde 3D sur un écran 2D.

En fonction des différents réglages de la caméra et des objets, la scène peut être rendue de différentes manières.

Pour nous aider à déboguer nos scènes, threejs et r3f nous fournissent quelques outils.

Helpers

Les helpers sont des composants qui nous aident à visualiser des options non visibles.

AxesHelper

L'axesHelper affiche les axes X, Y et Z dans la scène.

Il peut être très utile une fois que vous commencez à déplacer et à faire pivoter la caméra et les objets.

Il provient du package three, donc nous pouvons l'instancier comme ceci :

Copy
<Canvas>
  <axesHelper />
  {/* ... */}

Nous avons maintenant une représentation visuelle des axes dans notre scène :

GridHelper

Le gridHelper affiche une grille dans la scène.

Copy
<gridHelper args={[10, 10, "green", "blue"]} />

Nous avons maintenant une grille dans notre scène.

Comme tout autre objet 3D, nous pouvons le déplacer, le redimensionner et le faire pivoter.

Grid

R3F fournit également son propre composant grid.

Il offre plus d'options que le gridHelper comme la possibilité d'ajouter un effet de fondu et de choisir la taille des sections et des cellules.

Copy
<Grid
  sectionSize={3}
  sectionColor={"purple"}
  sectionThickness={1}
  cellSize={1}
  cellColor={"#6f6f6f"}
  cellThickness={0.6}
  infiniteGrid
  fadeDistance={50}
  fadeStrength={5}
/>

Nous avons maintenant une grille avec effet de fondu dans notre scène :

BoxHelper

Le boxHelper affiche une boîte autour d'un objet.