可视化操作三维模型

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

使用鼠标拖动三维模型，本质上就是把鼠标的拖动距离转化为三维模型位置或角度变化量。借助拖拽控件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

该控件配合拖拽控件就可以实现可视化操作三维模型，通过拖拽控件选中一个三维模型，然后通过拖拽控件对象的方法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);//设置三维坐标轴大小