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对象的动画处理进程。

上一章目录下一章