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无法显示三维外部文件问题解决方案

1、最初分析:

黑色背景

在运行three.js示例文件过程中,我下载后的模型总是不能导入成功。确认可以在官网页面完美显示并且自己代码无误后,锁定目标:浏览器设置。

2、查看问题:

首先,F12查看控制台信息。

报错信息

发现确实是因为谷歌浏览器设置问题。错误信息:

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

3、解决方案:

首先右键桌面的谷歌浏览器图标,选“属性

然后选“快捷方式”-“目标”,在末尾添加命令:

–disable-web-security –allow-file-access-from-files(需注意与前面路径加空格)

点击“应用”-“确定”,大功告成,重新从桌面启动浏览器,就可以成功导入外部文件了。

立体演示


4、结尾:

这些操作均是在桌面快捷方式下完成,从“开始”启动浏览器设置无效,原因不明(表示这个问题纠结了好久才发现)。

对于这种不能访问外部文件的设置,谷歌浏览器也是处于数据安全的考虑,设想如果网页可以直接获取你的本地文件,那么你的数据可能在你访问任何一个网页的时候就被上传备份了,这是可怕的!因此对于这种设置修改命令,我建议仅当调试程序时开启,当不调试程序时不要打开这个命令。

参考来源:http://stackoverflow.com/a/23758738

了解相关命令:http://stackoverflow.com/questions/18586921/how-to-launch-html-using-chrome-at-allow-file-access-from-files-mode