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