【three.js学习笔记】渲染器

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