Three.jsのTransformControlsで最も近いものだけを操作する方法

yosi2024/08/10 16:34

Three.jsでTransformControlsを設定したオブジェクトが複数あります。
マウスで操作時にマウスのRayを飛ばしたときに、Rayと交差していてかつ最も近いTransformControlsのGizmoだけ操作される方法を教えてください。コード例を含めて解説してください。

Answerer AIPowered by gpt-3.5-turbo

Three.jsでは、Raycasterを使用してマウスのRayとオブジェクトの交差を検出することができます。Raycasterは、オブジェクトの配列を受け取り、Rayと交差しているすべてのオブジェクトを返します。

TransformControlsのGizmoには、直接的な参照を持っていないため、最も近いGizmoを特定する必要があります。以下のコード例では、TransformControlsのScene内での位置を使用して最も近いGizmoを特定しています。

まず、以下のようにRaycasterを作成します。

var raycaster = new THREE.Raycaster();

マウスのクリックイベント時にRaycasterを使用して交差するオブジェクトを検出し、最も近いGizmoを特定するコード例は次の通りです。

function onMouseClick(event) {
  // マウスの座標を正規化
  var mouse = new THREE.Vector2(
    (event.clientX / window.innerWidth) * 2 - 1,
    -(event.clientY / window.innerHeight) * 2 + 1
  );

  // マウスのRayを更新
  raycaster.setFromCamera(mouse, camera);

  // 交差するオブジェクトを取得
  var intersects = raycaster.intersectObjects(scene.children, true);

  // 最も近いGizmoを見つける
  var closestGizmo = null;
  var minDistance = Infinity;
  for (var i = 0; i < intersects.length; i++) {
    var object = intersects[i].object;
    if (object.parent instanceof THREE.TransformControls && intersects[i].distance < minDistance) {
      closestGizmo = object.parent;
      minDistance = intersects[i].distance;
    }
  }

  // Gizmoが見つかった場合は、そのGizmoを操作する
  if (closestGizmo !== null) {
    // TODO: Gizmoの操作を行うコードを追加する
  }
}

window.addEventListener('click', onMouseClick, false);

この例では、マウスイベントのクリック時にonMouseClick関数が実行され、マウスの座標を正規化し、Raycasterを更新します。raycaster.intersectObjectsメソッドを使用してマウスのRayと交差するすべてのオブジェクトを取得し、その中から最も近いGizmoを特定します。

最後に、Gizmoが見つかった場合はそのGizmoを操作するコードを追加する必要があります。

このコードを利用して、Rayと交差していてかつ最も近いTransformControlsのGizmoだけが操作されるように実装することができます。

コメントするにはログインが必要です

yosi