需求:鼠标略过模型出现三维坐标轴,通过点击三维坐标轴,在 x、y、z 轴上移动,并且通过点中模型任意拖拽模型。
本质上,使用鼠标拖动三维模型,就是把鼠标的拖动距离,转化为三维模型的位置或角度变化量,使用three、js的拖拽控件·DragControls.js·就可以很容容易实现。
示例浏览地址:
https://ithanmang.gitee.io/threejs/home/201807/20180703/03-raycaster-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
– 拖拽结束
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽控件</title>
<style>
body {
margin: 0;
overflow: hidden;
}
#label {
position: absolute;
padding: 10px;
background: rgba(255, 255, 255, 0.6);
line-height: 1;
border-radius: 5px;
}
</style>
<script src="../../libs/build/three-r93.js"></script>
<script src="../../libs/jquery-1.9.1.js"></script>
<script src="../../libs/examples/js/Detector.js">