[Threejs] TransformControlsで回転してるときDragControlsを無視

yosi2024/09/09 15:17

ThreejsでTransformControlsで回転させてるときDragControlsを無視する方法を教えてください。

Answerer AIPowered by gpt-3.5-turbo

Three.jsのTransformControlsでオブジェクトを回転させる際に、DragControlsを無視する方法についてお教えします。

TransformControlsは、オブジェクトの回転、拡大縮小、移動などの操作をするためのツールです。DragControlsは、マウスカーソルのドラッグ操作によってオブジェクトを移動させるためのツールです。

TransformControlsが回転操作中にDragControlsを無視するには、以下の手順に従ってください。

まず、DragControlsとTransformControlsのインスタンスを作成します。

const dragControls = new DragControls(objects, camera, renderer.domElement);
const transformControls = new TransformControls(camera, renderer.domElement);
transformControls.attach(object);

次に、DragControlsのforEach関数内で、ドラッグされているオブジェクトがTransformControlsによって制御されている場合には、ドラッグ操作を無視するようにします。

dragControls.addEventListener('drag', (event) => {
  const draggedObject = event.object;
  if (draggedObject === transformControls.object) {
    dragControls.enabled = false;
  }
});

transformControls.addEventListener('dragging-changed', (event) => {
  dragControls.enabled = !event.value;
});

これにより、TransformControlsが回転操作中にはDragControlsが無効化され、ドラッグ操作が無視されるようになります。

yosi2024/09/09 15:47

自分の環境では上記の方法はうまくいかなかった。

TransformControlsのattachしているときは常にdragControlsのドラッグを無視するようにした。

    transformControls.addEventListener("object-changed", (event) => {
      dragControls.enabled = !event.value
    })

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

yosi