mark

renderer.domElement渲染到canvas中

this.rightModel.renderer.render( this.rightModel.scene , this.rightModel.camera );
this.ctx.drawImage( this.rightModel.renderer.domElement , -29 , -6 , 320 , 325  );  //大

canvas作为纹理贴到几何体上

    this.createPlane = {} ;
    this.createPlane.texture = new THREE.Texture( this.canvas );
    this.createPlane.planeMat = new THREE.MeshLambertMaterial({map:this.createPlane.texture});
    this.createPlane.planeGeo = new THREE.PlaneGeometry( 648 , 324 );
    this.plane = new THREE.Mesh( this.createPlane.planeGeo , this.createPlane.planeMat );
    // this.planeGe.plane.material.needsUpdate = true;

    this.plane.onBeforeRender = function(){
        _this.render();
    }
//每个mesh对象都有一个onBeforeRender事件，在每次渲染之前都会调用
    this.plane.onBeforeRender = function(){
        _this.render();   //是渲染函数
    }


this.render
    //将两个3d模型 以图片绘制到canvas中
    render:function(){
        //每次渲染的时候将canvas清空
        this.renderCanvas();

        // 每次渲染的时候都对纹理进行更新
        this.createPlane.planeMat.needsUpdate = true;
        this.createPlane.texture.needsUpdate = true;

        this.controlSpeed.leftStop ? 0:this.leftReg++ ;
        this.controlSpeed.rightStop ? 0:this.rightReg++ ;


        // 左侧模型
        this.leftModel.gruop.rotation.z =  this.leftReg * Math.PI/180 ;
        this.leftModel.renderer.render( this.leftModel.scene , this.leftModel.camera );
        //将左侧模型的canvas以图片的形式绘制到canvas中
        this.ctx.drawImage( this.leftModel.renderer.domElement , 29 , -6 , 320 , 325  );  //大模型，测试用
        this.ctx.drawImage( this.leftModel.renderer.domElement , 359 , 186 , 50 , 125  );

        // 右侧模型
        //将左侧模型的canvas以图片的形式绘制到canvas中
        this.rightModel.group.rotation.z = this.rightReg * Math.PI/180 ;
        this.rightModel.renderer.render( this.rightModel.scene , this.rightModel.camera );
        this.ctx.drawImage( this.rightModel.renderer.domElement , -29 , -6 , 320 , 325  );  //大模型，测试用
        this.ctx.drawImage( this.rightModel.renderer.domElement , 572 , 186 , 50 , 125  );
    },

异步变成同步

//上面的代码是不对的。同步中嵌套着异步，得到的结果是不稳定的。
//可以这么写：

(function iterator(i){
    if(i==params.length){
        //to do something.
        return;
    }
    //异步请求，
    $('xxx',{},function(data){
        //to do something

        iterator（i+1);
    });
})(0); 

webgl渲染到canvas中背景色透明

//alpha:1   0x000000
renderer = new THREE.WebGLRenderer({antialias:true,alpha:1});
renderer.setSize( 1000 , 600 );
renderer.setClearColor(0x000000,0);
document.body.appendChild( renderer.domElement );

//ctx的画布需要不停的clearRect() 将之前的删除掉重新绘制，就不会有webgl的背景
ctx.drawImage( renderer.domElement , 0 , 0 , 200 , 100 );

物体的光照

//环境光不能太大，如不能使0xffffff
var light1 = new THREE.AmbientLight( 0x333333 );
_this.rightModel.scene.add( light1 );
var light2 = new THREE.DirectionalLight( 0xffffff );
light2.position.set( 1200, 1200, -2000 );
_this.rightModel.scene.add( light2 );

几何体旋转有锯齿的原因

相机的远近边界太大。将相机的距离和远近边界刚好包围住几何体，会使效率达到最高，锯齿也会最小。

threejs中文文档

http://techbrood.com

更新纹理

this.createPlane = {} ;
this.createPlane.texture = new THREE.Texture( this.canvas );
this.createPlane.planeMat = new THREE.MeshLambertMaterial({map:this.createPlane.texture});
this.createPlane.planeGeo = new THREE.PlaneGeometry( 648 , 324 );
this.plane = new THREE.Mesh( this.createPlane.planeGeo , this.createPlane.planeMat );

//此部分要放到一直执行的函数里，因为每次渲染之后needsUpdate绘自动变为false
this.createPlane.planeMat.needsUpdate = true;
this.createPlane.texture.needsUpdate = true;