本篇文章將詳細講解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」的高//聲明渲染器對象：WebGLRendererrenderer=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渲染器的一些常用設置了，大家可以實際檢驗一下各種參數所起的作用。

總結

以上是生活随笔為你收集整理的Three.js之渲染器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。