ThreejsのDragControlsで重複したオブジェクトのドラッグ

yosi2024/08/19 19:05

ThreejsのDragControlsを適用した複数のオブジェクトがあります。複数のオブジェクトがカメラから見て重なっている状態でドラッグすると複数のオブジェクトが移動しますが、最もカメラに近い1つのみ移動させたいです。

Answerer AIPowered by gpt-3.5-turbo

最もカメラに近いオブジェクトのみを移動させるには、以下の手順を実行します。

ドラッグ操作の開始時に、カメラからの視点距離を計算します。
ドラッグ中に他のオブジェクトがドラッグ可能な状態にある場合、それぞれのオブジェクトに対してカメラからの距離を計算します。
距離が最も近いオブジェクトのみを移動させます。

具体的なコード例は以下のようになります（Three.js のバージョン r129 で動作することを確認しています）：

// DragControls の初期化
const dragControls = new THREE.DragControls(objects, camera, renderer.domElement);

// ドラッグ操作開始時の処理
dragControls.addEventListener('dragstart', function(event) {
  event.object.startDistance = event.object.position.distanceTo(camera.position);
});

// ドラッグ中の処理
dragControls.addEventListener('drag', function(event) {
  const closestObject = findClosestObject(event);
  // 最もカメラに近いオブジェクトのみを移動させる
  if (event.object === closestObject) {
    // オブジェクトの移動処理
  }
});

// カメラから最も近いオブジェクトを検索する関数
function findClosestObject(event) {
  let closestObject = null;
  let closestDistance = Infinity;
  
  objects.forEach(function(object) {
    if (object !== event.object && object.draggable) {
      const distance = object.position.distanceTo(camera.position);
      if (distance < closestDistance) {
        closestObject = object;
        closestDistance = distance;
      }
    }
  });
  
  return closestObject;
}

このコードでは、objects がドラッグ可能な複数のオブジェクトの配列であり、各オブジェクトは draggable プロパティを持つものとします。dragstart イベントでオブジェクトごとのカメラからの距離を保存し、drag イベントで最も距離が近いオブジェクトのみを移動させるようにしています。

yosi2024/08/19 19:35

上記コードでは解決しない。

yosi2024/08/19 19:37

そもそもDragControlsの仕組みを勘違いしていた。

1つのアプリケーションが持つべきDragControlsは基本的に1つ（複数のレンダリングを行う場合はその限りではない）です。
その場合、自動的に重複したオブジェクトは適切に処理されます。

https://discourse.threejs.org/t/prevent-drag-of-multiple-dragcontrols-at-the-same-time/8366

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

yosi