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则具有更好的兼容性。

[javascript] view plain copy

 

1. //开启Three.js渲染器:WebGLRenderer  
2. 　　　　　　　  
3. //声明全局变量  
4. var renderer;  
5. function initThree(){  
6.       
7.     //获取容器的宽高  
8.     width = document.getElementById('canvas3d').clientWidth;     //获取画布「canvas3d」的宽  
9.     height = document.getElementById('canvas3d').clientHeight;   //获取画布「canvas3d」的高  
10.       
11.     //声明渲染器对象：WebGLRenderer  
12.     renderer=new THREE.WebGLRenderer({  
13.         antialias:true,       //是否开启反锯齿  
14.         precision:"highp",    //着色精度选择  
15.         alpha:true,           //是否可以设置背景色透明  
16.         premultipliedAlpha:false,  
17.         stencil:false,  
18.         preserveDrawingBuffer:true, //是否保存绘图缓冲  
19.         maxLights:1           //maxLights:最大灯光数  
20.     });  
21.       
22.     //指定渲染器的高宽（和画布框大小一致）  
23.     renderer.setSize(width, height );  
24.     //追加canvas 元素到canvas3d元素中。  
25.     document.getElementById('canvas3d').appendChild(renderer.domElement);  
26.     //设置canvas背景色(clearColor)和背景色透明度（clearAlpha）  
27.     renderer.setClearColor(0x000000,0.5);  
28. }  

这是我们上篇文章中设置渲染器的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渲染器的一些常用设置了，大家可以实际检验一下各种参数所起的作用。

5，设置渲染器的像素比例是浏览器的像素比例

renderer.setPixelRatio( window.devicePixelRatio );