Drei proporciona un conjunto de controles útiles para navegar en tu escena e interactuar con objetos. Vamos a descubrirlos.

Orbit Controls

Ya hemos usado el componente OrbitControls en las lecciones anteriores para navegar en nuestra escena.

Aunque lo utilizamos sin ninguna props, proporciona opciones útiles para personalizar su comportamiento.

Primero, puedes decidir habilitar o deshabilitar características con las siguientes props booleanas:

• enableZoom
• enableRotate
• enablePan

Por ejemplo, si tu experiencia se basa en el desplazamiento, puedes desactivar el zoom para evitar conflictos cuando el usuario usa la rueda del ratón.

Luego, puedes cambiar la velocidad de los controles con:

• zoomSpeed
• rotateSpeed
• panSpeed

Finalmente, puedes cambiar los valores mínimos y máximos para el zoom:

• minZoom
• maxZoom

...las rotaciones superior e inferior:

• minPolarAngle
• maxPolarAngle

...las rotaciones izquierda y derecha:

• minAzimuthAngle
• maxAzimuthAngle

...y el pan con:

• minDistance
• maxDistance

Si ejecutas el proyecto de inicio, puedes ver que podemos alcanzar posiciones que parecen erróneas. (debajo del suelo, a través del mesh, paneo que no muestra el faro, etc.)

Vamos a combinar algunas de estas props para crear una experiencia más restringida:

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

Observa cómo ahora la cámara está limitada para siempre mostrar el faro de una manera atractiva. Evita que el usuario vea a través de los objetos y por debajo del suelo.

Esos pequeños detalles pueden hacer una gran diferencia en la calidad de tus experiencias.

Como el componente drei es solo un envoltorio alrededor de la clase OrbitControls de three.js consulta la documentación de three.js para ver todas las props disponibles.

Controles de Presentación

PresentationControls en oposición a OrbitControls interactúa con el contenido de los objetos envueltos, no con la cámara. Aparte de eso, son muy similares.

Aquí está el código de ejemplo de la documentación de drei