Debug

Starter pack

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 :

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

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

Axes helper

GridHelper

Le gridHelper affiche une grille dans la scène.

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

Nous avons maintenant une grille dans notre scène.

Grid helper

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.

<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 :

Grid

BoxHelper

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

End of lesson preview

To get access to the entire lesson, you need to purchase the course.