Web三维编程入门总结之三：面向对象的基础Web3D框架

//代码截取自https://github.com/tparisi/WebGLBook/tree/master/sim，在那里Tony Parisi的Sim库依照旧版Three.js库编写，为了使用新版本Three.js库我对Sim.js进行了部分修改，修改点附近以“@@”标记
// Sim.js - A Simple Simulator for WebGL (based on Three.js)
//Sim.js是一个基于Three.js的WebGL简单框架
Sim = {};//Sim是一个自包含对象，库中的其他变量和函数都是这个自包含对象的属性，可以在库的外部通过“Sim.”的方式调用库内的方法。

// Sim.Publisher - base class for event publishers
//Publish/Subscribe消息通信，用来优化多个对象之间的消息传递，事实上Tony Parisi的WebGL著作里并没有真正使用这种消息传递方法，关于Publish/Subscribe的简单例程可以参考：http://www.mamicode.com/info-detail-502782.html
Sim.Publisher = function() {
    this.messageTypes = {};
}

Sim.Publisher.prototype.subscribe = function(message, subscriber, callback) {
    var subscribers = this.messageTypes[message];
    if (subscribers)
    {
        if (this.findSubscriber(subscribers, subscriber) != -1)
        {
            return;
        }
    }
    else
    {
        subscribers = [];
        this.messageTypes[message] = subscribers;
    }

    subscribers.push({ subscriber : subscriber, callback : callback });
}

Sim.Publisher.prototype.unsubscribe =  function(message, subscriber, callback) {
    if (subscriber)
    {
        var subscribers = this.messageTypes[message];

        if (subscribers)
        {
            var i = this.findSubscriber(subscribers, subscriber, callback);
            if (i != -1)
            {
                this.messageTypes[message].splice(i, 1);
            }
        }
    }
    else
    {
        delete this.messageTypes[message];
    }
}

Sim.Publisher.prototype.publish = function(message) {
    var subscribers = this.messageTypes[message];

    if (subscribers)
    {
        for (var i = 0; i < subscribers.length; i++)
        {
            var args = [];
            for (var j = 0; j < arguments.length - 1; j++)
            {
                args.push(arguments[j + 1]);
            }
            subscribers[i].callback.apply(subscribers[i].subscriber, args);
        }
    }
}

Sim.Publisher.prototype.findSubscriber = function (subscribers, subscriber) {
    for (var i = 0; i < subscribers.length; i++)
    {
        if (subscribers[i] == subscriber)
        {
            return i;
        }
    }
    
    return -1;
}

// Sim.App - application class (singleton)
//Sim.App属性对“绘制环境”的封装（这里认为一个canvas里只有一个绘制环境）
Sim.App = function()
{
    Sim.Publisher.call(this);
    //call表示this（Sim.App）继承自Sim.Publisher，意指在Sim.App的上下文环境使用Sim.Publisher的“构造方法”，也就是使用Sim.App与Sim.Publisher重叠的属性（这里没有）执行了this.messageTypes = {};语句，为App对象建立了消息一个队列。
    
    this.renderer = null;
    this.scene = null;
    this.camera = null;
    this.objects = [];
    //可见App对象包含了canvas的上下文、与显卡的交互接口、相机设置、物体数组
}

Sim.App.prototype = new Sim.Publisher;
//prototype表示Sim.App扩展自new Sim.Publisher，当调用Sim.App中的某个未定义的方法时，编译器会尝试到prototype中去寻找，如App.subscribe
//prototype.init表示使用init方法对Sim.App进行原型拓展，这样所有的var myApp=new Sim.App都会自动具有init方法（找不到时去prototype中找）；这与"Sim.App.init"是不同的，如果后着的init不在App的“构造方法”中定义，myApp是不会具有init方法的。
Sim.App.prototype.init = function(param)//绘图环境初始化
{
    param = param || {};    
    var container = param.container;
    var canvas = param.canvas;
    
    // Create the Three.js renderer, add it to our div
    //@@这一段是我自己改的，加入了没有显卡时的软件渲染选择，可惜CanvasRenderer只支持部分的Three.js功能，并且没有找到去除图元边线的方法。
    
    function webglAvailable()//是否可用webgl
    {
        try{
            var canvas=document.createElement("canvas");
            return !!(window.WebGLRenderingContext
            &&(canvas.getContext("webgl")||canvas.getContext("experimental-webgl"))
            );
        }catch(e){
            return false;
        }
    }
    if(webglAvailable()){
        var renderer=new THREE.WebGLRenderer({ antialias: true, canvas: canvas });
    }else{
        var renderer=new THREE.CanvasRenderer({ antialias: true, canvas: canvas });//对于支持html5但不支持webgl的情况，使用更慢一些的2Dcanvas来软件实现webgl的效果
    }
    //var renderer = new THREE.WebGLRenderer( { antialias: true, canvas: canvas } );
    //@@
    
    renderer.setClearColor( 0xffffff );//@@旧版本中这个是默认的
    renderer.setSize(container.offsetWidth, container.offsetHeight);
    container.appendChild( renderer.domElement );
    container.onfocus=function(){
        renderer.domElement.focus();//@@保持焦点！！
    }
    //在部分浏览器中canvas不具备保持焦点的能力，点击canvas时焦点会被设置在外面的container上，影响交互效果
    
    // Create a new Three.js scene
    var scene = new THREE.Scene();
    scene.add( new THREE.AmbientLight( 0x505050 ) );
    scene.data = this;

    // Put in a camera at a good default location
    camera = new THREE.PerspectiveCamera( 45, container.offsetWidth / container.offsetHeight, 1, 10000 );
    camera.position.set( 0, 0, 3.3333 );

    scene.add(camera);
    
    // Create a root object to contain all other scene objects
    //建立了一个“根物体”，来存放场景中的其他物体，也就是根物体移动时所有其他物体会和它一同移动
    var root = new THREE.Object3D();
    scene.add(root);
    
    // Create a projector to handle picking
    //建立一个“投影器”来处理三维空间中的点选，@@新版本中去掉了这个属性，这里的定义是多余的
    var projector = new THREE.Projector();
    
    // Save away a few things
    //把上面的属性设为App对象的“公有”属性，var则是App对象的“私有”属性
    this.container = container;
    this.renderer = renderer;
    this.scene = scene;
    this.camera = camera;
    this.projector = projector;
    this.root = root;
    
    // Set up event handlers
    //启动事件响应功能
    this.initMouse();
    this.initKeyboard();
    this.addDomHandlers();
}

//Core run loop
//核心循环
Sim.App.prototype.run = function()
{
    this.update();
    this.renderer.render( this.scene, this.camera );
    var that = this;//之所以使用that是为了保存此时的this状态，requestAnimationFrame会在“浏览器认为合适”的时候重调，而那时的“this”可能已经发生变化了。
    //requestAnimationFrame(function() { that.run(); });
    requestAnimFrame(function() { that.run(); });//@@换用了另一个帧动画库
}

// Update method - called once per tick
//场景更新方法，这里的代码逻辑运行在浏览器端，是CPU资源的主要消耗者
Sim.App.prototype.update = function()
{
    var i, len;
    len = this.objects.length;
    for (i = 0; i < len; i++)
    {//将App的update转化为其所包含的objects的update
        this.objects[i].update();
    }
}

// Add/remove objects
//在场景中添加或删除一个物体
//添加
Sim.App.prototype.addObject = function(obj)
{
    this.objects.push(obj);//将物体对象添加到前面建立的物体数组里

    // If this is a renderable object, add it to the root scene
    //Three.js对于场景中object3D类型的对象提供了“parent/children ”式的关联链，Sim.js封装了这一关联
    if (obj.object3D)
    {
        this.root.add(obj.object3D);
    }
}
//删除
Sim.App.prototype.removeObject = function(obj)
{
    var index = this.objects.indexOf(obj);
    if (index != -1)
    {
        this.objects.splice(index, 1);
        // If this is a renderable object, remove it from the root scene
        
        if (obj.object3D)
        {
            this.root.remove(obj.object3D);
        }
    }
}

// Event handling
//事件处理
//初始化鼠标响应
Sim.App.prototype.initMouse = function()
{
    var dom = this.renderer.domElement;//取得canvas
    
    //添加监听
    var that = this;
    dom.addEventListener( ‘mousemove‘, 
            function(e) { that.onDocumentMouseMove(e); }, false );
    dom.addEventListener( ‘mousedown‘, 
            function(e) { that.onDocumentMouseDown(e); }, false );
    dom.addEventListener( ‘mouseup‘, 
            function(e) { that.onDocumentMouseUp(e); }, false );
    
    //中键滚动
    $(dom).mousewheel(
            function(e, delta) {
                that.onDocumentMouseScroll(e, delta);
            }
        );
    
    //鼠标悬停的物体
    this.overObject = null;
    //被点击到的物体
    this.clickedObject = null;
}
//初始化键盘响应
Sim.App.prototype.initKeyboard = function()
{
    var dom = this.renderer.domElement;
    
    var that = this;
    dom.addEventListener( ‘keydown‘, 
            function(e) { that.onKeyDown(e); }, false );
    dom.addEventListener( ‘keyup‘, 
            function(e) { that.onKeyUp(e); }, false );
    dom.addEventListener( ‘keypress‘, 
            function(e) { that.onKeyPress(e); }, false );

    // so it can take focus
    //这样设置之后canvas可以通过Tab键获得焦点，@@但这个设置并不完美，仍需要修改
    dom.setAttribute("tabindex", 1);
    dom.style.outline=‘none‘;
    dom.focus();
}

Sim.App.prototype.addDomHandlers = function()
{
    var that = this;
    //监听浏览器窗口大小的变化
    window.addEventListener( ‘resize‘, function(event) { that.onWindowResize(event); }, false );
}

//如果监听到鼠标移动
Sim.App.prototype.onDocumentMouseMove = function(event)
{
    event.preventDefault();//阻止浏览器的默认响应
    
    if (this.clickedObject && this.clickedObject.handleMouseMove)
    {//如果已经有选中的物体，并且被选中的物体具有自己的handleMouseMove方法
        var hitpoint = null, hitnormal = null;//三维空间中的“点击点”和“点击法线”（鼠标在3D物体上的点击方向）设为空
        var intersected = this.objectFromMouse(event.pageX, event.pageY);
        //在三维空间中通过浏览器中的二维坐标，找到鼠标所在的物体，稍后详细分析该方法
        if (intersected.object == this.clickedObject)
        {//如果鼠标所在的物体确实是被选中的物体，
            hitpoint = intersected.point;
            hitnormal = intersected.normal;
        }
        this.clickedObject.handleMouseMove(event.pageX, event.pageY, hitpoint, hitnormal);
        //执行这个被选中的物体的鼠标移动方法，比如拖拽变形之类
    }
    else
    {//如果没有被选中的物体
        var handled = false;
        
        var oldObj = this.overObject;//暂存旧的“悬停物体”
        var intersected = this.objectFromMouse(event.pageX, event.pageY);
        this.overObject = intersected.object;//将悬停物体设为鼠标所在的物体
    
        if (this.overObject != oldObj)//如果这是一个新物体，也就是说鼠标从一个物体上移到另一物体上
        {
            if (oldObj)
            {//如果存在旧的物体，则要触发旧物体的“鼠标移出”事件
                this.container.style.cursor = ‘auto‘;//取巧用CSS来处理光标变化，是2D网页和3Dcanvas的结合运用
                
                if (oldObj.handleMouseOut)
                {
                    oldObj.handleMouseOut(event.pageX, event.pageY);
                }
            }
    
            if (this.overObject)
            {
                if (this.overObject.overCursor)
                {
                    this.container.style.cursor = this.overObject.overCursor;//光标设置
                }
                
                if (this.overObject.handleMouseOver)
                {
                    this.overObject.handleMouseOver(event.pageX, event.pageY);
                }
            }
            
            handled = true;//表示物体的handleMouseOver执行完毕
        }
    
        if (!handled && this.handleMouseMove)
        {
            this.handleMouseMove(event.pageX, event.pageY);
            //如果物体没有执行handleMouseOver，且环境（App）能够响应handleMouseOver，则执行环境的鼠标移动响应，在应用中可体现为移动视角之类
        }
    }
}
//鼠标按下
Sim.App.prototype.onDocumentMouseDown = function(event)
{
    event.preventDefault();
        
    var handled = false;

    var intersected = this.objectFromMouse(event.pageX, event.pageY);
    if (intersected.object)
    {
        if (intersected.object.handleMouseDown)
        {
            intersected.object.handleMouseDown(event.pageX, event.pageY, intersected.point, intersected.normal);
            this.clickedObject = intersected.object;
            handled = true;
        }
    }
    
    if (!handled && this.handleMouseDown)
    {
        this.handleMouseDown(event.pageX, event.pageY);
    }
}

Sim.App.prototype.onDocumentMouseUp = function(event)
{
    event.preventDefault();
    
    var handled = false;
    
    var intersected = this.objectFromMouse(event.pageX, event.pageY);
    if (intersected.object)
    {
        if (intersected.object.handleMouseUp)
        {
            intersected.object.handleMouseUp(event.pageX, event.pageY, intersected.point, intersected.normal);
            handled = true;
        }
    }
    
    if (!handled && this.handleMouseUp)
    {
        this.handleMouseUp(event.pageX, event.pageY);
    }
    
    this.clickedObject = null;
}

Sim.App.prototype.onDocumentMouseScroll = function(event, delta)
{
    event.preventDefault();

    if (this.handleMouseScroll)
    {
        this.handleMouseScroll(delta);
    }
}

Sim.App.prototype.objectFromMouse = function(pagex, pagey)
{
    // Translate page coords to element coords
    //把浏览器页面中的位置转化为canvas中的坐标
    var offset = $(this.renderer.domElement).offset();    
    var eltx = pagex - offset.left;
    var elty = pagey - offset.top;
    
    // Translate client coords into viewport x,y
    //把canvas中的坐标转化为3D场景中的坐标
    var vpx = ( eltx / this.container.offsetWidth ) * 2 - 1;
    var vpy = - ( elty / this.container.offsetHeight ) * 2 + 1;
    
    var vector = new THREE.Vector3( vpx, vpy, 0.5 );//补充一个z轴坐标，形成三维空间中靠原点外侧的一个点（在Three.js中“点”分为Points和Vector两种，前者具有颜色、大小、材质是真正可以被显示出来的物体，后着是数学意义上的点或者向量）
    
    //this.projector.unprojectVector( vector, this.camera );
    vector.unproject(this.camera);//@@新版本中去掉投影矩阵影响的方法，不要忘记3D场景中看到的东西都是经过投影矩阵变形过的，所以要先把“看到的位置”转化为“实际的位置”再进行位置计算
    
    //@@这里是Sim.js中版本差异最大的地方
    //在三维空间中取得物体的原理：从相机到“鼠标所在的点”画一条射线，通过Three.js封装的方法取得这条射线穿过的所有物体，第一个穿过的物体被认为是“鼠标所在的物体”
    
    //var ray = new THREE.Ray( this.camera.position, vector.subSelf( this.camera.position ).normalize() );
    //var intersects = ray.intersectScene( this.scene );
    var raycaster = new THREE.Raycaster(this.camera.position,vector.subVectors(vector,this.camera.position).normalize());
    //@@Raycaster是新版Three.js专门为“穿过检测”定义的一种对象，与Ray分别开来，第一个参数是射线的端点，第二个参数是一个标准化（长度为一）的向量
    var intersects = raycaster.intersectObjects(this.scene.children,true);
    //true表示考虑物体的子物体，这里必须加上，被“穿过到”的物体被存入了一个数组    
    
    if ( intersects.length > 0 ) {        
        
        /*var i = 0;
        while(!intersects[i].object.visible)
        {
            i++;
        }
        
        var intersected = intersects[i];
        var mat = new THREE.Matrix4().getInverse(intersected.object.matrixWorld);
        var point = mat.multiplyVector3(intersected.point);
        
        return (this.findObjectFromIntersected(intersected.object, intersected.point, intersected.face.normal)); */  
        //@@
        for(var i=0;i<intersects.length;i++)
        {
            if(intersects[i].object.visible&&intersects[i].face)
            {//物体可见并且”有面“（剔除了穿过线物体和点物体的情况）
                var intersected = intersects[i];
                var mat = new THREE.Matrix4().getInverse(intersected.object.matrixWorld);
                var point=intersected.point.applyMatrix4( mat );//可见intersected.point是相对坐标，加上物体所在的姿态矩阵之后变成了3D空间中的绝对坐标
                return (this.findObjectFromIntersected(intersected.object, intersected.point, intersected.face.normal));
            }
        }
        return { object : null, point : null, normal : null };//没有找到符合条件的物体
    }
    else
    {
        return { object : null, point : null, normal : null };
    }
}

Sim.App.prototype.findObjectFromIntersected = function(object, point, normal)
{//回溯子物体的parent/children链，找到距它最近的具有data属性的父物体，这样的物体是使用Sim.Object定义的。这种回溯保持了复杂物体的整体性：拉一个人的手使得整个人移动，而非手脱离了人自己移动。

    if (object.data)
    {
        return { object: object.data, point: point, normal: normal };
    }
    else if (object.parent)
    {
        return this.findObjectFromIntersected(object.parent, point, normal);
    }
    else
    {
        return { object : null, point : null, normal : null };
    }
}

//键盘按键被按下
Sim.App.prototype.onKeyDown = function(event)
{
    // N.B.: Chrome doesn‘t deliver keyPress if we don‘t bubble... keep an eye on this
    //作者说的是浏览器兼容性的问题，是否可用JQuery弥补？
    event.preventDefault();

    if (this.handleKeyDown)
    {
        this.handleKeyDown(event.keyCode, event.charCode);
    }
}

Sim.App.prototype.onKeyUp = function(event)
{
    // N.B.: Chrome doesn‘t deliver keyPress if we don‘t bubble... keep an eye on this
    event.preventDefault();

    if (this.handleKeyUp)
    {
        this.handleKeyUp(event.keyCode, event.charCode);
    }
}
            
Sim.App.prototype.onKeyPress = function(event)
{
    // N.B.: Chrome doesn‘t deliver keyPress if we don‘t bubble... keep an eye on this
    event.preventDefault();

    if (this.handleKeyPress)
    {
        this.handleKeyPress(event.keyCode, event.charCode);
    }
}

//浏览器窗口大小变化
Sim.App.prototype.onWindowResize = function(event) {

    this.renderer.setSize(this.container.offsetWidth, this.container.offsetHeight);

    this.camera.aspect = this.container.offsetWidth / this.container.offsetHeight;//宽高比
    this.camera.updateProjectionMatrix();//投影矩阵

}
//给环境定义了一个取得焦点的方法
Sim.App.prototype.focus = function()
{
    if (this.renderer && this.renderer.domElement)
    {
        this.renderer.domElement.focus();
    }
}


// Sim.Object - base class for all objects in our simulation
//物体的“基类”
Sim.Object = function()
{
    Sim.Publisher.call(this);
    
    this.object3D = null;
    this.children = [];
}

Sim.Object.prototype = new Sim.Publisher;

Sim.Object.prototype.init = function()//物体本身没有init时，才会到“基类”里找
{
}

Sim.Object.prototype.update = function()
{
    this.updateChildren();//驱动子物体的update
}

// setPosition - move the object to a new position
//把物体移到到另一个位置
Sim.Object.prototype.setPosition = function(x, y, z)
{
    if (this.object3D)
    {
        this.object3D.position.set(x, y, z);
    }
}

//setScale - scale the object
//成比例的放大缩小这个物体
Sim.Object.prototype.setScale = function(x, y, z)
{
    if (this.object3D)
    {
        this.object3D.scale.set(x, y, z);
    }
}

//setScale - scale the object
//用递归的方式设置物体及其子物体的可见性
Sim.Object.prototype.setVisible = function(visible)
{
    function setVisible(obj, visible)
    {
        obj.visible = visible;
        var i, len = obj.children.length;
        for (i = 0; i < len; i++)
        {
            setVisible(obj.children[i], visible);
        }
    }
    
    if (this.object3D)
    {
        setVisible(this.object3D, visible);
    }
}
//@@写到这里作者也累了，所以附近出现了错误代码
// updateChildren - update all child objects
Sim.Object.prototype.updateChildren = function()
{
    var i, len;
    len = this.children.length;
    for (i = 0; i < len; i++)
    {
        this.children[i].update();
    }
}

Sim.Object.prototype.setObject3D = function(object3D)
{
    object3D.data = this;//建立双向链表，可以相互调用
    this.object3D = object3D;//将这个我们自己定义的Sim.Object和Three.js的object3D对象关联在一起
}

//Add/remove children
//添加/删除子物体
Sim.Object.prototype.addChild = function(child)
{
    this.children.push(child);//Sim.js设置
    
    // If this is a renderable object, add its object3D as a child of mine
    if (child.object3D)//Three.js设置
    {
        this.object3D.add(child.object3D);
    }
}

Sim.Object.prototype.removeChild = function(child)
{
    var index = this.children.indexOf(child);
    if (index != -1)
    {
        this.children.splice(index, 1);
        // If this is a renderable object, remove its object3D as a child of mine
        if (child.object3D)
        {
            this.object3D.remove(child.object3D);
        }
    }
}

// Some utility methods
//从物体返回到场景，如果没有这个方法就只能用全局变量去引用camera了
Sim.Object.prototype.getScene = function()
{
    var scene = null;
    if (this.object3D)
    {
        var obj = this.object3D;
        while (obj.parent)
        {
            obj = obj.parent;
        }
        
        scene = obj;
    }
    
    return scene;
}

Sim.Object.prototype.getApp = function()
{
    var scene = this.getScene();
    return scene ? scene.data : null;//如果scene不具备data属性，说明scene不对应App
}

// Some constants

/* key codes
37: left
38: up
39: right
40: down
*/
Sim.KeyCodes = {};
Sim.KeyCodes.KEY_LEFT  = 37;
Sim.KeyCodes.KEY_UP  = 38;
Sim.KeyCodes.KEY_RIGHT  = 39;
Sim.KeyCodes.KEY_DOWN  = 40;
//几个常用按键的键值

//这是一个模拟太阳系的3D场景，这里是solarSystem2.js文件
// Constructor
SolarSystemApp = function()
{
    Sim.App.call(this);//用Sim.App构造SolarSystemApp
}

// Subclass Sim.App
SolarSystemApp.prototype = new Sim.App();//原型扩展

// Our custom initializer
//“太阳系对象”的初始化方法（“构造”是“初始化”的基础）
SolarSystemApp.prototype.init = function(container)
{
    // Call superclass init code to set up scene, renderer, default camera
    //在this的情况下调用Sim.js库中的Sim.App.prototype.init方法，实现了代码重用，container是init方法的参数
    Sim.App.prototype.init.call(this, container);
    //除了调用库中的init，初始化还要做这些：
    this.planets = [];//行星数组
    this.orbits = [];//行星轨道
    this.lastX = 0;
    this.lastY = 0;
    this.mouseDown = false;
    this.lastTime = 0;//上次渲染时间
    this.currentlyPressedKeys=[];//当前键盘数组
    
    // Let there be light!
    var sun = new Sun();//建立Sun对象
    sun.init();//sun对象的初始化方法
    this.addObject(sun);//很自然的把Sun对象添加到SolarSystemApp的objects数组中

    // Are the stars out tonight...?
    var stars = new Stars();//太阳系外的遥远恒星
    // Push the stars out past Pluto
    //括号里是到太阳的最小距离
    stars.init(Sun.SIZE_IN_EARTHS + SolarSystemApp.EARTH_DISTANCE * SolarSystemApp.PLUTO_DISTANCE_IN_EARTHS);
    this.addObject(stars);
    
    // And on the third day...
    this.createPlanets();//建立行星
    
    // Move the camera back so we can see our Solar System
    this.camera.position.set(0, 0, Sun.SIZE_IN_EARTHS * 8);//将相机向外移动一些，看到太阳系的全貌
    
    var amb = new THREE.AmbientLight(0x676767);//环境光
    this.scene.add(amb);

    // Tilt the whole solar system toward the camera a bit
    //将整个太阳系绕x轴旋转一些
    this.root.rotation.x = Math.PI / 8;
    
    
}

//下面是对鼠标键盘的响应，其中的监听配置由Sim库完成
//SolarSystemApp对象的鼠标移动处理
SolarSystemApp.prototype.handleMouseMove = function(x, y)
{
    if (this.mouseDown)//如果现在鼠标是按下的状态
    {
        var dx = x - this.lastX;//鼠标在x轴上相对于原位置的位移
        if (Math.abs(dx) > SolarSystemApp.MOUSE_MOVE_TOLERANCE)//这个位移大于一定程度才能够生效，避免了鼠标微小震动的影响
        {
            this.root.rotation.y -= (dx * 0.01);//太阳系绕y轴旋转一定角度
        }
        this.lastX = x;//更新x轴原位置
        
        //return;
        
        var dy = y - this.lastY;
        if (Math.abs(dy) > SolarSystemApp.MOUSE_MOVE_TOLERANCE)
        {
            this.root.rotation.x += (dy * 0.01);
            
            // Clamp to some outer boundary values
            if (this.root.rotation.x < 0)
                this.root.rotation.x = 0;
            
            if (this.root.rotation.x > SolarSystemApp.MAX_ROTATION_X)//达到一定角度之后禁止继续旋转
                this.root.rotation.x = SolarSystemApp.MAX_ROTATION_X;
            
        }
        this.lastY = y;
        
    }    
}

SolarSystemApp.prototype.handleMouseDown = function(x, y)
{
    this.lastX = x;
    this.lastY = y;
    this.mouseDown = true;
}

SolarSystemApp.prototype.handleMouseUp = function(x, y)
{
    this.lastX = x;
    this.lastY = y;
    this.mouseDown = false;
}

SolarSystemApp.prototype.handleMouseScroll = function(delta)
{//鼠标滚轮控制相机远近
    var dx = delta;

    this.camera.position.z -= dx*10;
    
    // Clamp to some boundary values
    if (this.camera.position.z < SolarSystemApp.MIN_CAMERA_Z)
        this.camera.position.z = SolarSystemApp.MIN_CAMERA_Z;
    if (this.camera.position.z > SolarSystemApp.MAX_CAMERA_Z)
        this.camera.position.z = SolarSystemApp.MAX_CAMERA_Z;
}
//用currentlyPressedKeys数组保存键盘所有按键的状态
SolarSystemApp.prototype.handleKeyDown= function(keyCode,charCode)
{
    this.currentlyPressedKeys[keyCode] = true;
}
SolarSystemApp.prototype.handleKeyUp= function(keyCode,charCode)
{
    this.currentlyPressedKeys[keyCode] = false;
}

SolarSystemApp.prototype.update = function()
{
    showFocus();
    var speed=0//前后速度
    var adspeed=0//左右速度
    if (this.currentlyPressedKeys[65]) {
        // A键-横向左
        adspeed = -0.009;
    } else if ( this.currentlyPressedKeys[68]) {
        // D键-横向右
        adspeed = +0.009;
    } 

    if (this.currentlyPressedKeys[87]) {
        // W键-纵向上
        speed = 0.003;
    } else if ( this.currentlyPressedKeys[83]) {
        // S键-纵向下
        speed = -0.003;
    } 
    var timeNow = new Date().getTime();
    if (this.lastTime != 0) {
        var elapsed = timeNow - this.lastTime;

        if (speed != 0||adspeed!=0) {
            this.camera.position.x+=adspeed* elapsed;
            this.camera.position.y+=speed* elapsed;
        }

        // adjust yaw and pitch by their respective rates of change
    }
    this.lastTime = timeNow;
    
    Sim.App.prototype.update.call(this);//驱动Sim中的“this.objects[i].update();”
}
//按照planet_specs数组批量生成行星
SolarSystemApp.prototype.createPlanets = function ()
{        
    var i, len = SolarSystemApp.planet_specs.length;
    for (i = 0; i < len; i++)
    {
        var spec = SolarSystemApp.planet_specs[i];//这个行星的参数
        var planet = spec.type ? new spec.type : new Planet;//除了地球和土星比较特殊，其他星球都创建为Planet对象，Planet继承自Sim.Object
        
        planet.init({animateOrbit:true, animateRotation: true, showOrbit:true,        
            distance:spec.distance * SolarSystemApp.EARTH_DISTANCE + Sun.SIZE_IN_EARTHS, 
            size:spec.size * SolarSystemApp.EXAGGERATED_PLANET_SCALE, 
            period : spec.period,
            revolutionSpeed : 0.002,
            map : spec.map});
        this.addObject(planet);
        this.planets.push(planet);

        var orbit = new Orbit();//行星轨道
        orbit.init(spec.distance * SolarSystemApp.EARTH_DISTANCE + Sun.SIZE_IN_EARTHS);
        this.addObject(orbit);        
        this.orbits.push(orbit);
    }
}

SolarSystemApp.MOUSE_MOVE_TOLERANCE = 4;
SolarSystemApp.MAX_ROTATION_X = Math.PI / 2;
SolarSystemApp.MAX_CAMERA_Z = Sun.SIZE_IN_EARTHS * 50;
SolarSystemApp.MIN_CAMERA_Z = Sun.SIZE_IN_EARTHS * 2;//镜头最小z值
SolarSystemApp.EARTH_DISTANCE = 50;
SolarSystemApp.PLUTO_DISTANCE_IN_EARTHS = 77.2;
SolarSystemApp.EARTH_DISTANCE_SQUARED = 45000;
SolarSystemApp.EXAGGERATED_PLANET_SCALE = 5.55;
SolarSystemApp.planet_specs = [
    //大小，距离，周期，纹理图片
   // Mercury
   { size : 1 / 2.54, distance : 0.4, period : 0.24, map : "../IMAGE/SOLAR/Mercury.jpg" },
   // Venus
   { size : 1 / 1.05, distance : 0.7, period : 0.62, map : "../IMAGE/SOLAR/venus.jpg"  },
   // Earth
   { type : Earth, size : 1 , distance : 1, period : 1, map : "../IMAGE/SOLAR/earth_surface_2048.jpg"  },
   // Mars
   { size : 1 / 1.88, distance : 1.6, period : 1.88, map : "../IMAGE/SOLAR/MarsV3-Shaded-2k.jpg"  },
   // Jupiter
   { size : 11.1, distance : 5.2, period : 11.86, map : "../IMAGE/SOLAR/realj2k.jpg"  },
   // Saturn
   { type : Saturn, size : 9.41, distance : 10, period : 29.46, map : "../IMAGE/SOLAR/saturn_bjoernjonsson.jpg"  },
   // Uranus
   { size : 4, distance : 19.6, period : 84.01, map : "../IMAGE/SOLAR/uranus.jpg"  },
   // Neptune
   { size : 3.88, distance : 38.8, period : 164.8, map : "../IMAGE/SOLAR/neptune.jpg"  },
   // Pluto - have to exaggerate his size or we‘ll never see the little guy
   { size : 10 / 5.55, distance : 77.2, period : 247.7, map : "../IMAGE/SOLAR/pluto.jpg"  },
                               ];

//Sim.Object的使用方式
// Custom Planet class
Planet = function()
{
    Sim.Object.call(this);
}

Planet.prototype = new Sim.Object();

Planet.prototype.init = function(param)
{
    param = param || {};
    
    // Create an orbit group to simulate the orbit - this is the top-level Planet group
    var planetOrbitGroup = new THREE.Object3D();//planetOrbitGroup是一个Three.js中的3D对象，Three.js为它准备了各种相关的方法和属性
    
    // Tell the framework about our object
    this.setObject3D(planetOrbitGroup);//将Sim.js定义的Sim.object与Three.js定义的Object3D关联起来

    // Create a group to contain Planet and Clouds meshes
    var planetGroup = new THREE.Object3D();
    var distance = param.distance || 0;
    var distsquared = distance * distance;
    planetGroup.position.set(Math.sqrt(distsquared/2), 0, -Math.sqrt(distsquared/2));//设置行星位置
    planetOrbitGroup.add(planetGroup);//planetGroup是planetOrbitGroup在Three.js层面的子物体
    
    this.planetGroup = planetGroup;
    var size = param.size || 1;
    this.planetGroup.scale.set(size, size, size);//设置大小比例
    
    var map = param.map;//纹理图片
    this.createGlobe(map);//使用纹理图片建立行星

    this.animateOrbit = param.animateOrbit;//行星是否沿着轨道运动
    this.period = param.period;//公转周期
    this.revolutionSpeed = param.revolutionSpeed ? param.revolutionSpeed : Planet.REVOLUTION_Y;//公转速度
}

Planet.prototype.createGlobe = function(map)
{
    // Create our Planet with nice texture
    var geometry = new THREE.SphereGeometry(1, 32, 32);//建立一个多面体（球）
    //var texture = THREE.ImageUtils.loadTexture(map);
    //@@新版加载纹理方法
    var texture = new THREE.TextureLoader().load(map);
    //var material = new THREE.MeshPhongMaterial( {map: texture, ambient: 0x333333} );
    //@@
    var material = new THREE.MeshPhongMaterial( {map: texture} );
    var globeMesh = new THREE.Mesh( geometry, material ); 

    // Add it to our group
    this.planetGroup.add(globeMesh);//globeMesh是planetGroup的子物体
    
    // Save it away so we can rotate it
    this.globeMesh = globeMesh;
}


Planet.prototype.update = function() //物体的update
{    
    // Simulate the orbit
    if (this.animateOrbit)
    {
        this.object3D.rotation.y += this.revolutionSpeed / this.period;
    }
    
    Sim.Object.prototype.update.call(this);
}

Planet.REVOLUTION_Y = 0.003;