衬着器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();
    }