【three.js學(xué)習(xí)筆記】渲染器

劉玉平發(fā)布于2019-08-22 16:04 / 3055人閱讀

摘要：使用將能夠利用硬件加速從而提高渲染性能。這個渲染器比渲染器有更好的性能。聲明構(gòu)造器是一個可選對象，包含用來定義渲染器行為的屬性。所用的渲染上下文對象。設(shè)置背景色和背景色透明度渲染器渲染器不使用來繪制場景，而使用相對較慢的。

渲染器api WebGL渲染器（WebGLRenderer）

WebGL渲染器使用WebGL來繪制您的場景，如果您的設(shè)備支持的話。使用WebGL將能夠利用GPU硬件加速從而提高渲染性能。這個渲染器比 Canvas渲染器(CanvasRenderer) 有更好的性能。

聲明

var renderer = new THREE.WebGLRenderer();

構(gòu)造器（Constructor）

WebGLRenderer( parameters )

parameters 是一個可選對象，包含用來定義渲染器行為的屬性。當(dāng)沒有設(shè)置該參數(shù)時，將使用默認(rèn)值。

canvas: 一個用來繪制輸出的 Canvas 對象。
context: 所用的渲染上下文(RenderingContext) 對象。
precision : 著色器的精度。可以是"highp", "mediump" 或 "lowp". 默認(rèn)為"highp"，如果設(shè)備支持的話。
alpha : 是否可以設(shè)置背景色透明 , 默認(rèn)為 false.
premultipliedAlpha — Boolean, 默認(rèn)為 true.
antialias: 是否開啟反鋸齒, 默認(rèn)為 false.
stencil — Boolean, 默認(rèn)為 true.
preserveDrawingBuffer: 是否保存繪圖緩沖, 默認(rèn)為 false.
depth — Boolean, 默認(rèn)為 true.
logarithmicDepthBuffer — Boolean, 默認(rèn)為 false.

  var renderer=new THREE.WebGLRenderer({  
        antialias:true,       //是否開啟反鋸齒  
        precision:"highp",    //著色精度選擇  
        alpha:true,           //是否可以設(shè)置背景色透明  
        premultipliedAlpha:false,  
        stencil:false,  
        preserveDrawingBuffer:true, //是否保存繪圖緩沖  
        maxLights:1           //maxLights:最大燈光數(shù)  
    });

常用屬性 domElement

一個用來繪制輸出的 Canvas 對象。
該對象通過構(gòu)造函數(shù)中的渲染器所自動創(chuàng)建（如果沒有提供的話）；你只需要將其添加到您的網(wǎng)頁中。

常用方法 render

渲染器最重要的方法，使用相機渲染一個場景。

render ( scene, camera, renderTarget, forceClear )

如果指定了renderTarget，則渲染到上面，否則渲染到通常的canvas上。
如果forceClear為true, 顏色、深度和模板繪制緩沖將在渲染前被清除，即使渲染器的autoClear屬性為false。
即使forceClear被設(shè)置為true，我們?nèi)匀豢梢酝ㄟ^設(shè)置.autoClearColor, .autoClearStencil 或 .autoClearDepth 屬性為false來阻止特定的緩存被清除。

setSize ( width, height, updateStyle )

調(diào)整輸出canvas尺寸（寬度，高度），要考慮設(shè)備像素比，并且設(shè)置視口（viewport）以匹配該尺寸。如果設(shè)置 updateStyle 為true，則顯式添加像素到輸出canvas的樣式中。

 var renderer = new THREE.WebGLRenderer();

    renderer.setSize(window.innerWidth,window.innerHeight);

    document.body.appendChild(renderer.domElement);

setClearColor ( color, alpha )

設(shè)置清除的顏色和透明度。

// 創(chuàng)建一個具有紅色背景的渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize( 200, 100 );
renderer.setClearColor( 0xff0000 );

應(yīng)用

//開啟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,           //是否可以設(shè)置背景色透明
        premultipliedAlpha:false,
        stencil:false,
        preserveDrawingBuffer:true, //是否保存繪圖緩沖
        maxLights:1           //maxLights:最大燈光數(shù)
    });
    
    //指定渲染器的高寬（和畫布框大小一致）
    renderer.setSize(width, height );
    //追加canvas 元素到canvas3d元素中。
    document.getElementById("canvas3d").appendChild(renderer.domElement);
    //設(shè)置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();
    }