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,       //是否開啟反鋸齒  
            precision:"highp",    //著色精度選擇  
            alpha:true,           //是否可以設置背景色透明  
            premultipliedAlpha:false,  
            stencil:false,  
            preserveDrawingBuffer:true, //是否保存繪圖緩沖  
            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()中有一些參數我們可以設置，以下這些參數來自于官方文檔：

  (1)antialias:

　　  值：true/false

　　  含義：是否開啟反鋸齒，設置為true開啟反鋸齒。

  (2)precision:

　　  值：highp/mediump/lowp

　　  含義：著色精度選擇。

  (3)alpha:

　　  值：true/false

　　  含義：是否可以設置背景色透明。

  (4)premultipliedAlpha:

　　  值：true/false

　　  含義：？

  (5)stencil:

　　  值：true/false

　　  含義：?

  (6)preserveDrawingBuffer:

　　  值：true/false

　　  含義：是否保存繪圖緩沖，若設為true，則可以提取canvas繪圖的緩沖。

  (7)maxLights:

　　  值：數值int

　　  含義：最大燈光數，我們的場景中最多能夠添加多少個燈光。

2.制定渲染器的寬高，我們用renderer.setSize(width,height)來設置；

3.追加生成的canvas元素到容器元素中。canvas對象的獲取方法為renderer.domElement；

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

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