Drei propose un ensemble de contrôles utiles pour naviguer dans votre scène et interagir avec les objets. Découvrons-les.

Orbit Controls

Nous avons déjà utilisé le composant OrbitControls dans les leçons précédentes pour naviguer dans notre scène.

Bien que nous l'ayons utilisé sans aucune props, il offre des options utiles pour personnaliser son comportement.

Tout d'abord, vous pouvez décider d'activer ou de désactiver des fonctionnalités avec les props booléennes suivantes :

• enableZoom
• enableRotate
• enablePan

Par exemple, si votre expérience est basée sur le défilement, vous pouvez désactiver le zoom pour éviter les conflits lorsque l'utilisateur utilise la molette de la souris.

Ensuite, vous pouvez changer la vitesse des contrôles avec les props :

• zoomSpeed
• rotateSpeed
• panSpeed

Enfin, vous pouvez modifier les valeurs minimales et maximales pour le zoom :

• minZoom
• maxZoom

...les rotations haut et bas :

• minPolarAngle
• maxPolarAngle

...les rotations gauche et droite :

• minAzimuthAngle
• maxAzimuthAngle

...et le pan avec :

• minDistance
• maxDistance

Si vous lancez le projet de démarrage, vous pouvez voir que nous pouvons atteindre des positions qui semblent buggées. (sous le sol, à travers le mesh, pan pour ne pas montrer le phare, etc.)

Combinons certaines de ces props pour créer une expérience plus restreinte :

Copy
<OrbitControls
  enablePan={false}
  maxPolarAngle={Math.PI / 2}
  minAzimuthAngle={-Math.PI / 2}
  maxAzimuthAngle={Math.PI / 2}
  minDistance={3}
  maxDistance={10}
/>

Voyez comment la caméra est maintenant limitée pour toujours montrer le phare d'une manière attrayante. Cela empêche l'utilisateur de voir à travers les objets et sous le sol.

Ces petits détails peuvent faire une grande différence dans la qualité de vos expériences.

Étant donné que le composant drei n'est qu'un wrapper autour de la classe OrbitControls de three.js, consultez la documentation de three.js pour voir toutes les props disponibles.

Presentation Controls

PresentationControls contrairement à OrbitControls interagissent avec le contenu des objets du wrapper, pas avec la caméra. En dehors de cela, ils sont très similaires.

Voici le code d'exemple tiré de la documentation de drei