three.js - 使用 THREE.DragControls 实现模型拖拽的-错误处理

功能：

鼠标略过模型出现三维坐标轴，通过点击三维坐标轴，在 x、y、z 轴上移动，并且通过点中模型任意拖拽模型。 
本质上，使用鼠标拖动三维模型，就是把鼠标的拖动距离，转化为三维模型的位置或角度变化量，使用three、js的拖拽控件·DragControls.js·就可以很容容易实现。 

问题：

在使用webpack时，需要确保你的依赖配置 three确保在0.94.0版本，在低版本中是没有这个拖拽方法的

import DragControls from 'three/examples/js/controls/DragControls';
// 引入ES6的写法
let THREE = require('../../node_modules/three/build/three.module');

webpack配置

{
   test: require.resolve("three/examples/js/controls/DragControls"),
   use: "imports-loader?THREE=three"
},
{
  test: require.resolve("three/examples/js/controls/DragControls"),
  use: "exports-loader?THREE.DragControls"
}

创建对象

// 添加拖拽控件
function initDragControls() {
    // 添加平移控件
    var transformControls = new THREE.TransformControls(camera, renderer.domElement);
    scene.add(transformControls);

    // 过滤不是 Mesh 的物体,例如辅助网格对象
    var objects = [];
    for (let i = 0; i < scene.children.length; i++) {
        if (scene.children[i].isMesh) {
            objects.push(scene.children[i]);
        }
    }
    // 初始化拖拽控件
    var dragControls = new THREE.DragControls(objects, camera, renderer.domElement);

    // 鼠标略过事件
    dragControls.addEventListener('hoveron', function (event) {
        // 让变换控件对象和选中的对象绑定
        transformControls.attach(event.object);
    });
    // 开始拖拽
    dragControls.addEventListener('dragstart', function (event) {
        controls.enabled = false;
    });
    // 拖拽结束
    dragControls.addEventListener('dragend', function (event) {
        controls.enabled = true;
    });
}