功能:
鼠标略过模型出现三维坐标轴,通过点击三维坐标轴,在 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;
});
}