Dreiは、シーン内をナビゲートしオブジェクトと対話するための便利なコントロールを提供します。それらを見ていきましょう。

Orbit Controls

前のレッスンで、シーンをナビゲートするために OrbitControls コンポーネントを使用しました。

プロパティなしで使用しましたが、動作をカスタマイズするための便利なオプションが提供されています。

まず、以下のブールプロパティを使用して、機能を有効または無効にすることができます:

• enableZoom
• enableRotate
• enablePan

例えば、スクロールベースのエクスペリエンスの場合、ユーザーがマウスホイールを使用したときの競合を防ぐためにズームを無効にすることができます。

次に、以下を使ってコントロールの速度を変更できます:

• zoomSpeed
• rotateSpeed
• panSpeed

最後に、ズームの最小値と最大値を変更できます:

• minZoom
• maxZoom

...上部と下部の回転を:

• minPolarAngle
• maxPolarAngle

...左右の回転を:

• minAzimuthAngle
• maxAzimuthAngle

...およびパンを次のように変更できます:

• minDistance
• maxDistance

スタータープロジェクトを実行すると、バグのように見える位置に到達できることがわかります。 (地面の下、meshを通過、灯台を表示しないようにパン、など。)

これらのプロパティをいくつか組み合わせて、より制約のあるエクスペリエンスを作成してみましょう:

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

カメラが灯台を常に魅力的に表示するように制限されている様子がわかります。ユーザーがオブジェクトを通り抜けたり、地面の下を見たりするのを防ぎます。

これらの小さなディテールが、エクスペリエンスの品質にとって大きな違いを生むことがあります。

dreiコンポーネント は three.js の OrbitControls クラスをラップしたものに過ぎないので、すべての利用可能なプロパティを確認するために three.js documentation をチェックしてください。

Presentation Controls

PresentationControlsはOrbitControlsとは異なり、カメラではなくラッパーオブジェクトのコンテンツと対話します。それ以外は非常に似ています。

こちらはdreiのドキュメントからのサンプルコードです。