渲染器api
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();
}