Three.js 可视化平移、旋转三维模型

Question

对于一些三维建模软件，通过鼠标事件选中一个三维模型会显示一个三维坐标轴，通过鼠标拖拽坐标轴可以平移该三维模型。

使用鼠标拖动三维模型，本质上就是把鼠标的拖动距离转化为三维模型位置或角度变化量。借助拖拽控件DragControls.js很容易实现，当然你也可以自定义封装一个控件。

引入控件

引入拖拽控件 DragControls.js 和可视化变换控件 TransformControls.js，控件文件位置：three.js-master\examples\js\controls\。

<!--引入拖拽控件OrbitControls.js-->
<script src="DragControls.js"></script>
<!--引入可视化平移变换控件OrbitControls.js-->
<script src="TransformControls.js"

设置控件对象

//可视化变换控件对象
transformControl = new THREE.TransformControls( camera,renderer.domElement );
scene.add( transformControl );//控件对象添加到场景对象

//拖拽控件对象
var dragcontrols = new THREE.DragControls(scene.children,camera,renderer.domElement );
//拖拽控件对象设置鼠标事件
dragcontrols.addEventListener( 'hoveron', function ( event ) {
  //控件对象transformControl与选中的对象object绑定
  transformControl.attach( event.object );
} )

代码解析

控件对象 TransformControls 的作用是可视化操作，默认显示一个三维坐标轴，该控件对象就是一个三维模型，所以需要执行语句 scene.add( transformControl )，把该控件添加到三维场景中。

控件对象 DragControls 主要作用是当你通过鼠标事件选中一个三维模型对象，就会显示该模型对应的三维坐标轴。

addEventListener 方法的参数 hoveron 表示鼠标平移到三维模型事件，当鼠标平移到一个三维模型上的时候，会弹出该模型对应的一个三维坐标轴。

代码 transformControl.attach(event.object) 的作用是实现两个控件对象的绑定，如果拖拽控件对象DragControls不绑定变换控件对象 TransformControls，hoveron 鼠标事件执行的时候，就不会弹出一个三维坐标轴，变换控件对象 TransformControls 本质上就是一个网格模型对象，执行方法 attach() 绑定的时候，本质上就相当于把一个三维模型的position属性与三维坐标轴的position属性进行了关联，只要坐标轴平移，坐标轴对应的三维模型就会平移。

增加控件对象

可以在上面代码的基础上增加一个 OrbitControls 控件对象，该控件在第一章课程中就讲解过。

通过上面的控件对象可以实现一个三维模型的可视化操作，通过OrbitControls控件可以通过操作相机对象来实现三维场景中所有网格模型的旋转、平移和缩放变换。

//轨道控件对象(相机对象旋转、平移、缩放)
controls = new THREE.OrbitControls( camera,renderer.domElement )

拖拽控件 DragControls.js

查看拖拽控件DragControls.js的源代码你会发现通过构造函数THREE.Raycaster()创建了一个射线发射器对象，这就说明拖拽控件具有选择对象的作用。

通过源码可以查看该控件的使用方法，构造函数的参数是什么，参数的默认值是什么，该控件对象有哪些方法和属性。在实际开发的时候，也可以根据项目的需要参考控件的源码重新封装一个拖拽控件。

构造函数格式：

THREE.DragControls(_objects,_camera,_domElement )

_objects表示对象组成的数组，比如所有网格模型对象组成一个数组，比如scene.children表示的三维场景中的所有光源、网格模型、Object3D对象；_camera表示相机对象，_domElement表示显示三维场景渲染结果的canvas画布对象。

不同版本的拖拽控件DragControls.js使用的时候可能略有不同，比如_objects和_camera对象的顺序是颠倒的，在学习这些知识的时候不用记忆，团队协作的时候，不同的工程师写的同一功能控件在语法结构基本类似，但是语法细节上可能会略有不同，比如刚刚谈到的参数顺序不同，所以实际开发的时候可以通过文档说明书写程序，如果没有文档说明书，控件的源代码就是最好的说明书，直接控件源代码及其注释即可。

可视化变换控件 TransformControls.js

transformControl 构造函数方法属性 setMode() 参数 'rotate''scale''translate'new THREE.OrbitControls()Object3D 对象数组 _objects 相机对象 _cameracanvas 对象 _domElement 参数 setSize()[0.0,1.0] 参数范围 object 默认值 undefinedvisible 布尔值...

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

通过该控件对象方法 setMode 的值可以实现三维模型的平移、旋转和缩放对应不同的可视化操作，比如平移是通过三维坐标轴实现，旋转通过一个三维圆弧线实现。

旋转、缩放操作

通过控件对象 transformControl 的方法 setMode("rotate") 设置旋转操作，上面的程序中并没有设置控件对象 transformControl 方法 setMode 的参数，但程序默认的是 translate，表示平移。

transformControl.setMode('rotate');

缩放操作，模式设置方法 setMode 的参数使用 scale。

transformControl.setMode('scale');

setSize() 方法

通过控件对象 transformControl 的方法 setSize() 可以设置三维坐标轴的几何尺寸，方法的参数范围 [0.0,1.0]

transformControl.setSize(0.4);//设置三维坐标轴大小