Drei fornece um conjunto de controles úteis para navegar na sua cena e interagir com objetos. Vamos descobri-los.

Orbit Controls

Já utilizamos o componente OrbitControls nas lições anteriores para navegar na nossa cena.

Enquanto usamos sem nenhum props, ele oferece opções úteis para personalizar seu comportamento.

Primeiro, você pode decidir habilitar ou desabilitar recursos com as seguintes props booleanas:

• enableZoom
• enableRotate
• enablePan

Por exemplo, se sua experiência é baseada em rolagem, você pode desabilitar o zoom para evitar conflitos quando o usuário usa a roda do mouse.

Em seguida, você pode alterar a velocidade dos controles com:

• zoomSpeed
• rotateSpeed
• panSpeed

Por fim, você pode mudar os valores mínimos e máximos para o zoom:

• minZoom
• maxZoom

...as rotações superior e inferior:

• minPolarAngle
• maxPolarAngle

...as rotações esquerda e direita:

• minAzimuthAngle
• maxAzimuthAngle

...e o pan com:

• minDistance
• maxDistance

Se você iniciar o projeto inicial, pode ver que podemos alcançar posições que parecem com bugs. (abaixo do solo, através do mesh, pan para não mostrar o farol, etc.)

Vamos combinar algumas dessas props para criar uma experiência mais restrita:

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

Veja como a câmera agora está limitada para sempre mostrar o farol de uma maneira atraente. Impede que o usuário veja através dos objetos e abaixo do solo.

Esses pequenos detalhes podem fazer uma grande diferença na qualidade de suas experiências.

Como o componente drei é apenas um invólucro em torno da classe OrbitControls do three.js, confira a documentação do three.js para ver todas as props disponíveis.

Controles de Apresentação

PresentationControls em oposição ao OrbitControls interagem com o conteúdo dos objetos do wrapper, não com a câmera. Fora isso, eles são muito semelhantes.

Aqui está o código de exemplo da documentação do drei