14 - three.js 笔记 - 使用 THREE.DragControls 实现模型拖拽

需求：鼠标略过模型出现三维坐标轴，通过点击三维坐标轴，在 x、y、z 轴上移动，并且通过点中模型任意拖拽模型。
本质上，使用鼠标拖动三维模型，就是把鼠标的拖动距离，转化为三维模型的位置或角度变化量，使用three、js的拖拽控件·DragControls.js·就可以很容容易实现。
示例浏览地址:
http://www.ithanmang.com/threejshome/dragControls.html

引入库文件

<!--拖拽控件-->
<script src="../../libs/examples/js/controls/DragControls.js"></script>
<!--可视化平移控件-->
<script src="../../libs/examples/js/controls/TransformControls.js"></script>

创建对象

// 添加拖拽控件
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;
    });
}

效果
这里写图片描述

注意:拖拽的时候回影响其他的事件,最好处理一下

`TransformControls`方法

transformControls 配合拖拽控件就可以实现可视化操作三维模型。
通过拖拽控件选中一个三维模型，然后通过拖拽控件对象的方法attach()可以把选中的三维模型与控件transformControls绑定，可以把控件对象transformControls理解为一个特殊的三维模型。
例如平移状态，控件对象TransformControls就是一个三维坐标轴，通过拖动坐标轴就可以移动与坐标轴绑定的三维模型。

`DragControls`方法

查看源码可以得知，DragControls具有选中模型的作用。
这里写图片描述
构造函数
THREE.DragControls = function ( _objects, _camera, _domElement )
参数
_objects：对象数组。
_camera：相机
_domElement：渲染器

可以添加的事件
dragControls.addEventListener()

hoveron – 鼠标划中
hoveroff – 鼠标划过
dragstart – 开始拖拽
dragend – 拖拽结束