Three.js的轻量级封装框架Sim.js解析（1）

这段时间在看《WebGL入门指南》，其中使用的Three.js的轻量级封装框架，本来使用Three.js框架就有点困难，还要使用Three.js的框架，OMG~~~

发牢骚归发牢骚，不看是不会懂的。初看书本上的Sim.js写出的代码，第一感觉，这都写的是啥啊。的确，要看懂这些，要求对js的面向对象的思想有一定的了解。下面是本人现学现卖总结的有关js面向对象的知识，仅供参考：

http://blog.csdn.net/birdflyto206/article/category/6121645

下面是我阅读Sim.js源码所做的笔记，由于在初步涉猎webgl，js学得也不是很好，难免会有错误的地方，请各位看官不吝指教。

如果直接读Sim.js的源码，肯定云里雾里的，所以我们对照书上第三章的第一个例子，来看Sim.js框架到底是如何运行的。

//-------------earth-basic.js---------------------
//该例子是画一个地球。首先是抽象出一个EarthApp类，该类继承Sim.App类
EarthApp = function()
{
Sim.App.call(this);//调用父类的构造函数
}
// Subclass Sim.App
EarthApp.prototype = new Sim.App();//继承Sim.App的函数原型

//---------------------------Sim.js-----------------------------------
//现在我们看看Sim.App的定义
// Sim.App - application class (singleton)
Sim.App = function()
{
//Sim.App也是继承Sim.Publisher类的，该类负责管理框架中的事件订阅/发布。该例子中没有用到事件，这个后面再讲。
Sim.Publisher.call(this);

//初始化一个Three.js场景中的基本对象
this.renderer = null;
this.scene = null;
this.camera = null;
//全局app中要渲染的物体的集合
this.objects = [];
}
//让Sim.App.prototype指向一个Sim.Publisher对象，也就达到继承Sim.Publisher原型中所有方法和属性的目。这时js中实现继承的一种方式。
Sim.App.prototype = new Sim.Publisher;

//小结：声明一个EarthApp实例，实际主要完成的操作就是声明一些Three.js场景中render、scene、camera等变量。

//-------------earth-basic.js---------------
//自定义EarthApp的初始化方法
EarthApp.prototype.init = function(param)
{
//调用父类的init方法完成scene、render、camera的初始化
//注意：这里的this传递进去很重要，这是js中实现继承的关键。
Sim.App.prototype.init.call(this, param);

// 创建一个Earth对象，由于我们是画一个地球，根据OOP的思想，将其抽象为一个Earth对象，该对象继承Sim.js框架中的Sim.Object对象
var earth = new Earth();
//调用Earth对象的init方法
earth.init();
//将earth对象的实例添加上到EarthApp中
this.addObject(earth);
}

//---------------------------Sim.js-----------------------------------
//Sim.App的init方法
//因为自定义的EarthApp调用父类的init方法传递的是其代表其本身的this，所以，父类init方法中的所有this相关的操作都被映射为EarthApp的操作。说得简单点，现在Sim.App中的this代表的是EarthApp。这样EarthApp就可以不会吹灰之力继承父类init方法中的所有操作，而不必自己再实现一遍，这就是Sim.js框架的目的所在。
//现在我们看看，Sim.App的init方法中干了些什么。
Sim.App.prototype.init = function(param)
{
//传递的param是一个json对象
param = param || {};
var container = param.container;
var canvas = param.canvas;

// 初始化在Sim.App构造函数中定义的一些场景元素
var renderer = new THREE.WebGLRenderer( { antialias: true, canvas: canvas } );
renderer.setSize(container.offsetWidth, container.offsetHeight);
container.appendChild( renderer.domElement );

// Create a new Three.js scene
var scene = new THREE.Scene();
scene.add( new THREE.AmbientLight( 0x505050 ) );
//为scene动态添加一个属性data，指向EarthApp（子类对象），这个还不知道是干什么的，后面再说。
scene.data = this;

// 初始化相机
camera = new THREE.PerspectiveCamera( 45, container.offsetWidth / container.offsetHeight, 1, 10000 );
camera.position.set( 0, 0, 3.3333 );

scene.add(camera);

// 创建一个Object3D对象，Object3D对象是Sim.Object对象的一个属性，这个类会在后面讲到。该属性一般存储的是一个将要绘制的对象，一般是一个Mesh。例如本例中，Object3D对象就是一个球体和材质组合的Mesh对象。该属性是通过setObject3D函数完成的。
var root = new THREE.Object3D();
scene.add(root);

// 创建一个工具类，用于完成在Three.js鼠标拾取对象。
var projector = new THREE.Projector();

// 保存一些变量到全局对象的属性中，为了方便在任何地方能够访问到。
this.container = container;
this.renderer = renderer;
this.scene = scene;
this.camera = camera;
this.projector = projector;
this.root = root;

// 设置事件相关的句柄。这里先跳过。
this.initMouse();
this.initKeyboard();
this.addDomHandlers();
}

//小结：earth-basic.js中这段代码主要完成的任务就是初始化一些Three.js场景中的基本元素，如scene、camera、render等。

//下面看看自定义的Earth对象
//---------earth-basic.js------------------
// Custom Earth class
Earth = function()
{
Sim.Object.call(this);//继承Sim.Object
}
Earth.prototype = new Sim.Object();

//这里Earth的init方法没有调用父类的init方法，为什么呢？
//我们看下Sim.js的源码，发现Sim.Object的init方法为空
Earth.prototype.init = function()
{
//下面是Three.js中的操作
// Create our Earth with nice texture
var earthmap = "../images/earth_surface_2048.jpg";
var geometry = new THREE.SphereGeometry(1, 32, 32);
var texture = THREE.ImageUtils.loadTexture(earthmap);
var material = new THREE.MeshBasicMaterial( { map: texture } );
var mesh = new THREE.Mesh( geometry, material );

// Let's work in the tilt
mesh.rotation.x = Earth.TILT;

// 将Mesh对象作为Object3D传递给Sim.js框架
// 这里的this指的是什么？
// 对，就是Earth类，而Earth对象我们并没有定义setObject3D方法啊？对，这个方法是继承父类Sim.Object的，我们看看父类中的setObject3D方法，其实就是mesh对象赋值给Sim.Object类的Object3D属性。
this.setObject3D(mesh);
}

Earth.prototype.update = function()
{
// "I feel the Earth move..."
this.object3D.rotation.y += Earth.ROTATION_Y;//这里的Object3D就是Mesh对象，因为前面已经 this.setObject3D(mesh); 结合Sim.js源码
}

Earth.ROTATION_Y = 0.0025;
Earth.TILT = 0.41;

//--------Sim.js---------
//此案例中Object3D对象传递进来的就是一个包含了纹理的地球Mesh对象
Sim.Object.prototype.setObject3D = function(object3D)
{
object3D.data = this;
this.object3D = object3D;
}

//然后在主页面中是这么调用框架的
$(document).ready(
function() {
var container = document.getElementById("container");
var app = new EarthApp();//自定义的EarthApp对象，表示整个应用程序
app.init({ container: container });
app.run();
}
);
//看看app.run()方法
Sim.App.prototype.run = function()
{
this.update();//首先调用刷新界面的方法
this.renderer.render( this.scene, this.camera );//Three.js中的render方法
var that = this;//保存Sim.App的引用。
requestAnimationFrame(function() { that.run(); });
}

Sim.App.prototype.update = function()
{
var i, len;
len = this.objects.length;
//循环当前场景中的所有的物体，让其全部重绘。重绘的方法是子类自己实现的。
//该类中Earth对象的update方法就是不断的更改其绕y轴旋转的角度，以达到旋转动画的目的。
for (i = 0; i < len; i++)
{
this.objects[i].update();//每个自定义的Object对象必须有update方法，可以在该方法中完成旋转动画等。
}
}

ok，至此为止，我们分析了第一个例子的运行原理。总结如下：

1.首先抽象出整个应用程序类EarthApp，继承自Sim.App，主要完成Three.js中一些变量的初始化操作，像声明render、scene、camera等，还有一些事件的订阅和发布，本例中没有用到这些 。还有就是初始化当前场景中需要渲染的物体，根据面向对象编程的思想，把这些要渲染的物体都封装在一个对象中，本例中的对象就是Earth类，该类的初始化就是在EarthApp的init方法中完成的。

2.然后抽象出自己要渲染的对象类Earth，这个对象类是一个容器，其中可以包含很多要渲染的物体，当然本例中只包含了一个贴了纹理的地球。该类的init方法的主要是定义要画的物体，本例中画的地球的几何和纹理以及包装成要画的Mesh等操作都是在该方法中完成的。

3.然后是关键的一步，就是循环重绘。Sim.js框架是通过调用Sim.App的run方法开启的，首先调用自身的update方法，当前这步是为了让物体进行简单的动画，比如绕坐标轴进行旋转。真正的循环重绘操作是通过requestAnimationFrame完成的，不断的调用run方法，run方法中调用Three.js中的render(scene,camera)方法，这样整个程序就运行起来了。

4.面向对象思想是门艺术！！！