2.3 基于Sim.js框架的网页
2.3.1 加载Sim.js框架
Sim.js是由美国Tony Parisi开发的一个基于Three.js的轻量级框架,它采用面向对象的方式封装了Three.js中的常用对象,简化了Three.js中许多重复的任务,比如设置渲染器、循环重绘、处理DOM时间等。Sim.js是完全开源和免费的,所有源码可以从https://github.com/tparisi/Sim.js下载。
Sim.js框架最核心的文档是Sim.js文件,除此之外,还对关键帧动画部分做了优化,本书中所有的关键帧动画也是依赖于Sim.js框架的。一般会在网页的<head>部分加载该文件,形如:
2.3.2 完整的Sim.js网页
Sim.js通过三个类对Three.js进行了重新封装,分别是:Sim.Publisher类、Sim.Application类和Sim.Object类。利用Sim.js框架,程序将变得更加清晰,对于2.2.2节的网页,改进后的代码如下:
1.网页文件(index.html)
2.脚本文件(index.js)
在脚本文件中,初始化了两个类App和Cube,它们分别继承自Sim.Application和Sim.Object。其中,Cube类通过init方法添加了一个正方体,通过update方法实现自身动画;App类完成了场景和摄像机的初始化,并在场景中实例化了Cube类的一个对象。
使用了Sim.js框架后的网页有如下优点:
(1)独立了脚本文件。程序员可以专注于应用本身的编程,而不用过多地考虑前台页面问题。
(2)完全的面向对象机制。对3D场景和3D对象均进行了重组,通过init方法封装了初始化工作,降低了耦合度,提高了可重用性。
(3)更强的动画处理能力。通过update方法,程序只需关注每个3D对象本身的动画处理程序即可,Sim框架会自动处理场景中每个3D对象的动画处理进程。