【three.js詳解之二】渲染器篇

本篇文章將詳細講解three.js中渲染器（renderer）的設置方法。

three.js文檔中渲染器的分支如下：

Renderers

• CanvasRenderer
• DOMRenderer
• SVGRenderer
• WebGLRenderer
• WebGLRenderTarget
• WebGLRenderTargetCube
• WebGLShaders

可以看到three.js提供了很多的渲染方式，我們選擇的當然是WebGLRenderer，但我們這里要將CanvasRenderer與WebGLRenderer兩種渲染方式做一個比較。

在上篇文章的例子中，我們完全可以把WebGL渲染器：

renderer=new THREE.WebGLRenderer();

替換為Canvas渲染器：

renderer=new THREE.CanvasRenderer();

這樣canvas就會以2d的方式渲染，以下是效果對比（前者用WebGLRenderer渲染）：

很明顯，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);
              }

這是我們上篇文章中設置渲染器的js代碼，有以下流程：

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);

那么以上就是three.js渲染器的一些常用設置了，大家可以實際檢驗一下各種參數所起的作用。