進め方
Three.js Interaction はレイキャスティングとコントロールを扱います。画面入力がどのようにカメラのレイになるか、交差結果でオブジェクトやインスタンスをどう特定するか、そして埋め込みキャンバスではウィンドウ全体を前提にせず専用の座標変換が必要な理由を説明しています。
カメラ操作とオブジェクト操作は別の役割です。オービット、フライ、マップ、ドラッグ、トランスフォームの各コントロールは役割が異なります。エディターのようなシーンでは、モデルをドラッグしたときにカメラまで回転しないよう、これらのハンドラーを調整する必要があります。
期待される成果物
- キャンバス相対座標によるオブジェクトのピッキング
- 適切なカメラコントロール設定
- 選択、ホバー、ドラッグ、トランスフォームの動作
指示からレビューまで
- 01対象を定義する
選択可能なオブジェクトを一覧にし、入れ子のメッシュやインスタンスを個別の対象として扱うかを決めます。
- 02入力を対応付ける
ポインター位置をキャンバスの矩形に対して正規化し、アクティブなカメラを通してレイキャストします。
- 03コントロールを調整する
操作中のナビゲーションの競合を管理し、選択が変わったときにフィードバックを元に戻します。