前言
在图灵社区: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库文件!!!
最后的展示效果:点击进入 (打开速度感人