[Threejs]如何通过DragControls/TransformControls实现对象拖动效果

通过DragControls可以实现鼠标拖动三维模型的效果．

DragControls的事件注册

具体示例代码如下:

// 基于r109
// import { DragControls } from 'three/examples/jsm/controls/DragControls';

// const objects: Object3D[] = ...
this.dragControls = new DragControls([objects], this.camera, this.renderer.domElement);
this.dragControls.addEventListener('dragstart', (evt) => {
  // 开始drag
});
this.dragControls.addEventListener('drag', (evt) => {
// 持续drag
});
this.dragControls.addEventListener('dragend', (evt) => {
  // 结束drag
});

关于子元素会被单独拖动的问题

如果鼠标选中的是对象的某个部位来拖拉的话，可能(模型各部位没有合并)会出现部位(child)被单独拖动而其他部位不动的情况．这种情况，我们可以在drag事件回调中通过实时更新对象(parent)的位置来解决，比如：

// 这里假设只有一层父子关系(如果是多级父子关系，则找到根部的parent后并更新其posistion)
this.dragControls.addEventListener('drag', (evt) => {
  evt.object.parent.position.copy(evt.object.postion);  // parent的位置更新为object的位置
  evt.object.position.set(0, 0, 0); // 相对于parent来说, position置为原始状态
// ...
});

使用TransformControls实现x/y/z轴的变换

TransformControls可以实现平移/旋转/缩放等效果，参考它的setMode()方法．其中平移功能可以针对某一条轴来对物体进行平移，可以达到拖动物体的效果.示例代码如下:

// ...
    this.transformControls = new TransformControls(this.camera, this.renderer.domElement);
    this.scene.add(this.transformControls);
    this.transformControls.addEventListener('mouseDown', (evt) => {
      // 平移开始时禁用相机控件
      this.orbitControls.enabled = false;
    });
    this.transformControls.addEventListener('mouseUp', (evt) => {
      // 平移结束时启用相机控件
      this.orbitControls.enabled = true;
    });
    // 指定某个对象绑定到transformControls上，比如点击物体时可将物体绑定
    // const object: Object3D = ...
    this.transformControls.attach(object);
    // 解绑: this.transformControls.detach();