Three.js之让三维模型动起来

前言

在图灵社区:Three.js入门指南中  介绍了Three.js的基础知识,完全可以入门。学习后完全能够明白Three.js的工作原理和用法。这里对于基础的知识就不做详细讲解,在前面入门指南的基础下,我们来看一下怎么让三维模型动起来!

1、选取演示范例

我们可以从官网给的详细例子和源代码入手,我们这里选取的例子为:loader_3mf  ,具体代码分析:源码   选取的为倒入外部文件,可以实现鼠标的操作,正好符合我们的要求。然后就可以对示例进行代码分析。

2、代码分析及修改

首先导入文件部分:

这里除了我们熟悉的three.js外加了其他几个文件。首先3MFLoader.js很明显对应的为加载3mf格式的,然后是Detector.js,然并软我也不知道干嘛的。。。。先不管它,下一个OrbitControls.js,看名字就知道是针对轨迹控制的,最终要实现轨迹移动肯定就是它了。重点研究它。最后一个jszip.min.js,看名字压缩用的,不管他。总结来说,就是重点研究OrbitControls.js文件。

先不管头文件,接着都代码,发现还有一部分是你不熟悉的,在入门指南里面没有的。代码如下:

宝宝惊呆了,这不就是刚才打算重点研究的OrbitControls.js文件嘛,controls啊!!啥也不说了,就是干!

3、通读库源文件代码

既然OrbitControls.js用于控制的,就要明白内部有什么函数和变量,如何实现鼠标控制的。虽说Three.js官方文档写的比较烂(非常烂),但是源文件注释还是很给力的。比如:

你看,一上来就告诉你要干嘛的了!(中文翻译比较烂,领悟精神)代码实现了三种控制:

你看还告诉你怎么用的(说实话,代码读到一半我才反应过来是鼠标两个键盘和滑轮实现的,囧)。剩下的就是你要都代码了。没关系,才1000行而已(故作镇定)。通读下来,你就会对鼠标控制有了很详细的了解。这两详细讲解一下target这个属性,通过这个属性设置一个方向向量,可以实现物体围绕这个矢量旋转。

你自己都吧,完整的注释代码翻译在这里,四级水平不保证正确,错了也不要打我。

4、修改代码进行适应你的文件

你可能说,直接改一下导入格式文件不就行了吗?too young too simple!完全行不通啊。。。。。。你会发现,完全不是你要的效果啊!!这里说一下具体修改的几个地方:

调节照相机的far:near的比例。其次,千万要注释掉camera.up.set( 0, 0, 1 );否则你的三维模型看起来傻呆呆的转,完全不按套路转啊!!!然后就是调整下照相机位置。

其他内容对比源文件就能明白,这里不说了。注释代码在这里

5、总结

对于Three.js的学习,最好的办法就是跟着示例学习,读源代码,当然也有比较坑的时候,比如:

遇到一种实现效果,去读官网的代码实现,通读用到的JS库文件!!!

最后的展示效果:点击进入 (打开速度感人

作者: 任国庆

据说帅气的男人漂亮的女人都和他成为了朋友。

《Three.js之让三维模型动起来》有2个想法

  1. Hi There! We are searching for some people that might be interested in from working their home on a full-time basis. If you want to earn $100 a day, and you don’t mind developing some short opinions up, this might be perfect opportunity for you! Simply check out the link here NOW!

发表评论

电子邮件地址不会被公开。