第一课 定义一个可复用的面向对象的Three.js三维绘图框架

在参考为他人的Three.js的学习笔记，现在摘录如下（javascript部分）：

var three3DObject={
    scene:null,        // 场景
    camera:null,       // 相机
    renderer:null,     // 渲染器
    controls: null,    // 控制器
    container:null,    // 场景容器
    stats:null,        // 统计控件
    init:function(){
        // 初始化
        var SCREEN_WIDTH=window.innerWidth,SCREEN_HEIGHT=window.innerHeight;
        // 创建一个场景
        this.scene = new THREE.Scene();

        // 创建一个投影相机
        this.camera = new THREE.PerspectiveCamera(75, SCREEN_WIDTH/SCREEN_HEIGHT, 0.1, 1000);
        this.camera.position.set(0,0,5);

        // 创建一个渲染器
        this.renderer = new THREE.WebGLRenderer();
        this.renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);

        // 准备容器
        this.container=document.getElementById('display');
        this.container.appendChild(this.renderer.domElement);
        document.body.appendChild(this.container);

        // 创建一个控制器
        this.controls=new THREE.OrbitControls(this.camera);

        // 准备统计
        this.stats = new Stats();
        this.stats.domElement.style.position = 'absolute';
        this.stats.domElement.style.bottom = '10px';
        this.stats.domElement.style.zIndex = 10;
        this.container.appendChild( this.stats.domElement );

        // 创建需要绘制的3D几何模型和像素模型
        var geometry = new THREE.CubeGeometry(1,1,1);
        var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
        var cube = new THREE.Mesh(geometry, material);
        this.scene.add(cube);
    }
};
// 渲染
function render(){
    if(three3DObject.renderer){
        three3DObject.renderer.render(three3DObject.scene,three3DObject.camera);
    }
}
// 使模型动画化
function animate(){
    requestAnimationFrame(animate);
    render();
    update();
}
// 状态更新
function update(){
    three3DObject.controls.addEventListener('change',render());
    three3DObject.stats.update();
}
// 载入Three3D数据
function initialize3DObject(){
    three3DObject.init();
    animate();
}

// 多浏览器兼容处理
if (window.addEventListener){
    window.addEventListener('load', initialize3DObject, false);
}
else if (window.attachEvent){
    window.attachEvent('onload', initialize3DObject);
}
else{
    window.onload = initialize3DObject();
}

这是一个可复用的面向对象的一个Three.js三维绘图框架，模型数据处理和像素数据处理均在three3DObject.init()方法里面处理。

参考文章：http://www.tuicool.com/articles/uAVNV3