渲染器

WebGL渲染器（WebGLRenderer）

WebGL渲染器使用WebGL来绘制您的场景，如果您的设备支持的话。使用WebGL将能够利用GPU硬件加速从而提高渲染性能。这个渲染器比 Canvas渲染器(CanvasRenderer) 有更好的性能。

声明

var renderer = new THREE.WebGLRenderer();

构造器（Constructor）

WebGLRenderer( parameters )

parameters 是一个可选对象，包含用来定义渲染器行为的属性。当没有设置该参数时，将使用默认值。

canvas: 一个用来绘制输出的 Canvas 对象。

context: 所用的 渲染上下文(RenderingContext) 对象。precision : 着色器的精度。可以是"highp", "mediump" 或 "lowp". 默认为"highp"，如果设备支持的话。alpha : 是否可以设置背景色透明 , 默认为 false.premultipliedAlpha — Boolean, 默认为 true.antialias: 是否开启反锯齿, 默认为 false.stencil — Boolean, 默认为 true.preserveDrawingBuffer: 是否保存绘图缓冲, 默认为 false.depth — Boolean, 默认为 true.logarithmicDepthBuffer — Boolean, 默认为 false.

var renderer=new THREE.WebGLRenderer({          antialias:true,       //是否开启反锯齿          precision:"highp",    //着色精度选择          alpha:true,           //是否可以设置背景色透明          premultipliedAlpha:false,          stencil:false,          preserveDrawingBuffer:true, //是否保存绘图缓冲          maxLights:1           //maxLights:最大灯光数      });

常用属性

domElement

一个用来绘制输出的 Canvas 对象。

该对象通过构造函数中的渲染器所自动创建（如果没有提供的话）；你只需要将其添加到您的网页中。

常用方法

render

渲染器最重要的方法，使用相机渲染一个场景。

render ( scene, camera, renderTarget, forceClear )

如果指定了renderTarget，则渲染到上面，否则渲染到通常的canvas上。

如果forceClear为true, 颜色、深度和模板绘制缓冲将在渲染前被清除，即使渲染器的autoClear属性为false。即使forceClear被设置为true，我们仍然可以通过设置.autoClearColor, .autoClearStencil 或 .autoClearDepth 属性为false来阻止特定的缓存被清除。

setSize ( width, height, updateStyle )

调整输出canvas尺寸（宽度，高度），要考虑设备像素比，并且设置视口（viewport）以匹配该尺寸。如果设置 updateStyle 为true，则显式添加像素到输出canvas的样式中。

var renderer = new THREE.WebGLRenderer();    renderer.setSize(window.innerWidth,window.innerHeight);    document.body.appendChild(renderer.domElement);

setClearColor ( color, alpha )

设置清除的颜色和透明度。

// 创建一个具有红色背景的渲染器var renderer = new THREE.WebGLRenderer();renderer.setSize( 200, 100 );renderer.setClearColor( 0xff0000 );

应用

//开启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);}

Canvas渲染器（CanvasRenderer）

Canvas渲染器不使用WebGL来绘制场景，而使用相对较慢的Canvas 2D Context API。兼容性高

var renderer = new THREE.CanvasRenderer();

检查浏览器兼容性

function webglAvailable() {        try {            var canvas = document.createElement( 'canvas' );            return !!( window.WebGLRenderingContext && (                canvas.getContext( 'webgl' ) ||                canvas.getContext( 'experimental-webgl' ) )            );        } catch ( e ) {            return false;        }    }    if ( webglAvailable() ) {        renderer = new THREE.WebGLRenderer();    } else {        renderer = new THREE.CanvasRenderer();    }