
上QQ阅读APP看书,第一时间看更新
2.2 基于Three.js引擎的网页
2.2.1 加载Three.js引擎
Three.js是一个开源引擎,目前有大量的爱好者正在不断修正不良的设计,添加新的功能,所有版本可以在http://threejs.org/上免费下载。
在这个引擎包中,最核心的两个文件是Three.js和Three.min.js,后者是经过处理优化后的库文件,它更加小巧且功能是完整的。一般地,我们会在网页的<head>部分加载该文件,形如:

2.2.2 完整的Three.js网页
Three.js引擎要结合HTML5,并与各类网页元素(如CSS、DIV等)合理结合才能收到良好效果。下面的例子展示了一个完整的Three.js网页,网页效果如图2-5所示。

图2-5 一个Three.js网页效果


这段代码从<body onLoad="threeStart();">标记处开始运行,并先后对渲染器、摄像机、场景、灯光、3D对象进行了初始化,然后通过requestAnimationFrame方法循环调用loop函数实现动画效果,动画的内容是三个立方体分别绕x、y、z轴旋转,每次旋转0.01 rad。
该程序是一个过程性很强的程序,每一个Three.js网页都需要做这些初始化的工作,程序员需要不断重复写这些代码。或者说,Three.js只是提供给了用户一个便捷的API接口,并没有说明如何有效地使用这些API,这些更高级别的重用机制有待用户自己完成。