three.js3D学习(2)

转载：http://www.cnblogs.com/shawn-xie/archive/2012/08/20/2647184.html

渲染器梳理

这是three.js提供的渲染方式，WebGL在渲染效果上更胜一筹，WebGL的渲染能够最大程度表现你制作精美的场景，如果你的设备支持它，这个渲染器具有比CanvasRenderer更好的性能，相反地，CanvasRenderer则具有更好的兼容性。

//开启Three.js渲染器:WebGLRenderer
　　　　　　　//声明全局变量
             var renderer;
             function initThree() {
                //获取容器的宽高
                width = document.getElementById('canvas3d').clientWidth;//获取画布「canvas3d」的宽
                height = document.getElementById('canvas3d').clientHeight;//获取画布「canvas3d」的高
                //声明渲染器对象：WebGLRenderer
                renderer=new THREE.WebGLRenderer({
                    antialias:true,//antialias:true/false是否开启反锯齿
                    precision:"highp",//precision:highp/mediump/lowp着色精度选择
                    alpha:true,//alpha:true/false是否可以设置背景色透明
                    premultipliedAlpha:false,//?
                    stencil:false,//?
                    preserveDrawingBuffer:true,//preserveDrawingBuffer:true/false是否保存绘图缓冲
                    maxLights:1//maxLights:最大灯光数
                    });
                //指定渲染器的高宽（和画布框大小一致）
                renderer.setSize(width, height );
                //追加 【canvas】 元素到 【canvas3d】 元素中。
                document.getElementById('canvas3d').appendChild(renderer.domElement);
                //设置canvas背景色(clearColor)和背景色透明度（clearAlpha）
                renderer.setClearColor(0x000000,0.5);
              }

流程如下：

1.声明渲染器对象，我们用new THREE.WebGLRenderer()来新建一个WebGL渲染器。

其中WebGLRenderer()中有一些参数我们可以设置，以下这些参数来自于官方文档：

antialias:

　　值：true/false

　　含义：是否开启反锯齿，设置为true开启反锯齿。

precision:

　　值：highp/mediump/lowp

　　含义：着色精度选择。

alpha:

　　值：true/false

　　含义：是否可以设置背景色透明。

premultipliedAlpha:

　　值：true/false

　　含义：？

stencil:

　　值：true/false

　　含义：?

preserveDrawingBuffer:

　　值：true/false

　　含义：是否保存绘图缓冲，若设为true，则可以提取canvas绘图的缓冲。

maxLights:

　　值：数值int

　　含义：最大灯光数，我们的场景中最多能够添加多少个灯光。

2.制定渲染器的宽高，我们用renderer.setSize(width,height)来设置；

3.追加生成的canvas元素到容器元素中。canvas对象的获取方法为renderer.domElement；

4.设置canvas背景色(clearColor)和背景色透明度（clearAlpha），renderer.setClearColor(clearColor,clearAlpha);

如何让物体动起来呢？

HTML5为我们提供了requestAnimFrame，它会自动在每次页面重绘前调用传入的函数。
如果我们一开始这样渲染：

function render()
{
 renderer.render(scene, camera);
}
只需要改成这样：

function render()
{
 requestAnimationFrame(render);
 object.position.x += 1;
 renderer.render(scene, camera);
}