Drei fornisce un set di controlli utili per navigare nella tua scena e interagire con gli oggetti. Scopriamoli insieme.

Orbit Controls

Abbiamo già utilizzato il componente OrbitControls nelle lezioni precedenti per navigare nella nostra scena.

Sebbene lo abbiamo usato senza alcun props, offre opzioni utili per personalizzare il suo comportamento.

Innanzitutto, puoi decidere di abilitare o disabilitare funzionalità con le seguenti props booleane:

• enableZoom
• enableRotate
• enablePan

Ad esempio, se la tua esperienza si basa sullo scroll, puoi disabilitare lo zoom per prevenire conflitti quando l'utente utilizza la rotellina del mouse.

Poi, puoi modificare la velocità dei controlli con:

• zoomSpeed
• rotateSpeed
• panSpeed

Infine, puoi modificare i valori minimo e massimo per lo zoom:

• minZoom
• maxZoom

...le rotazioni superiori e inferiori:

• minPolarAngle
• maxPolarAngle

...le rotazioni sinistra e destra:

• minAzimuthAngle
• maxAzimuthAngle

...e il pan con:

• minDistance
• maxDistance

Se esegui il progetto iniziale, puoi vedere che possiamo raggiungere posizioni che sembrano buggate. (sotto il terreno, attraverso il mesh, pan per non mostrare il faro, ecc.)

Combiniamo alcune di queste props per creare un'esperienza più vincolata:

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

Osserva come la telecamera ora è limitata per mostrare sempre il faro in modo accattivante. Impedisce all'utente di vedere attraverso gli oggetti e sotto il terreno.

Questi piccoli dettagli possono fare una grande differenza nella qualità delle tue esperienze.

Poiché il componente drei è solo un wrapper attorno alla classe OrbitControls di three.js, consulta la documentazione di three.js per vedere tutte le props disponibili.

Controlli di Presentazione

PresentationControls, a differenza di OrbitControls, interagiscono con il contenuto degli oggetti wrapper, non con la camera. A parte ciò, sono molto simili.

Ecco il codice di esempio dalla documentazione di drei