前言
在图灵社区：Three.js入门指南中 介绍了Three.js的基础知识，完全可以入门。学习后完全能够明白Three.js的工作原理和用法。这里对于基础的知识就不做详细讲解，在前面入门指南的基础下，我们来看一下怎么让三维模型动起来！
1、选取演示范例
我们可以从官网给的详细例子和源代码入手，我们这里选取的例子为：loader_3mf ，具体代码分析：源码 选取的为倒入外部文件，可以实现鼠标的操作，正好符合我们的要求。然后就可以对示例进行代码分析。
2、代码分析及修改
首先导入文件部分：
|
1 2 3 4 5 |
<script src="../build/three.js"></script> <script src="js/loaders/3MFLoader.js"></script> <script src="js/Detector.js"></script> <script src="js/controls/OrbitControls.js"></script> <script src="js/libs/jszip.min.js"></script> |
这里除了我们熟悉的three.js外加了其他几个文件。首先3MFLoader.js很明显对应的为加载3mf格式的，然后是Detector.js，然并软我也不知道干嘛的。。。。先不管它，下一个OrbitControls.js，看名字就知道是针对轨迹控制的，最终要实现轨迹移动肯定就是它了。重点研究它。最后一个jszip.min.js，看名字压缩用的，不管他。总结来说，就是重点研究OrbitControls.js文件。
先不管头文件，接着都代码，发现还有一部分是你不熟悉的，在入门指南里面没有的。代码如下：
|
1 2 3 4 5 |
var controls = new THREE.OrbitControls( camera, renderer.domElement ); controls.addEventListener( 'change', render ); controls.target.set( 80, 65, 35 ); controls.update(); window.addEventListener( 'resize', onWindowResize, false ); |
宝宝惊呆了，这不就是刚才打算重点研究的OrbitControls.js文件嘛，controls啊！！啥也不说了，就是干！
3、通读库源文件代码
既然OrbitControls.js用于控制的，就要明白内部有什么函数和变量，如何实现鼠标控制的。虽说Three.js官方文档写的比较烂（非常烂），但是源文件注释还是很给力的。比如：
|
1 2 3 4 5 6 7 |
// This set of controls performs orbiting, dollying (zooming), and panning. //这一系列控制表现：按轨道运动，移动（猛烈快速的），移镜头平移 // Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default). //不像TrackballControls这种控制方式，这种方式包含了obje.up的up方向（默认+Y坐标值） //盘旋Orbit - left mouse / touch: one finger move //极速上升Zoom - middle mouse, or mousewheel / touch: two finger spread or squish //摇动Pan - right mouse, or arrow keys / touch: three finter swipe |
你看，一上来就告诉你要干嘛的了！（中文翻译比较烂，领悟精神）代码实现了三种控制：
|
1 2 3 4 |
orbiting, dollying (zooming), and panning //盘旋Orbit - left mouse / touch: one finger move //极速上升Zoom - middle mouse, or mousewheel / touch: two finger spread or squish //摇动Pan - right mouse, or arrow keys / touch: three finter swipe |
你看还告诉你怎么用的（说实话，代码读到一半我才反应过来是鼠标两个键盘和滑轮实现的，囧）。剩下的就是你要都代码了。没关系，才1000行而已（故作镇定）。通读下来，你就会对鼠标控制有了很详细的了解。这两详细讲解一下target这个属性，通过这个属性设置一个方向向量，可以实现物体围绕这个矢量旋转。
|
1 2 3 |
// "target" sets the location of focus, where the object orbits around //“target”参数用于设置物体轨道运行的焦点 this.target = new THREE.Vector3(); |
你自己都吧，完整的注释代码翻译在这里，四级水平不保证正确，错了也不要打我。
4、修改代码进行适应你的文件
你可能说，直接改一下导入格式文件不就行了吗？too young too simple！完全行不通啊。。。。。。你会发现，完全不是你要的效果啊！！这里说一下具体修改的几个地方：
|
1 2 3 4 5 6 7 |
//创建照相机：透视照相机，调节near：far比例可以产生视觉上的拉远 camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 ); // Z is up for objects intended to be 3D printed. //坑爹的一句，带上就不能正常转了。。。。（doge //camera.up.set( 0, 0, 1 ); //camera.position.set( -200, -230, 150 ); camera.position.set( 0, 0, 700 ); |
调节照相机的far：near的比例。其次，千万要注释掉camera.up.set( 0, 0, 1 );否则你的三维模型看起来傻呆呆的转，完全不按套路转啊！！！然后就是调整下照相机位置。
其他内容对比源文件就能明白，这里不说了。注释代码在这里。
5、总结
对于Three.js的学习，最好的办法就是跟着示例学习，读源代码，当然也有比较坑的时候，比如：
遇到一种实现效果，去读官网的代码实现，通读用到的JS库文件！！！
最后的展示效果：点击进入 (打开速度感人
