亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

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

劉玉平 / 3143人閱讀

摘要：使用將能夠利用硬件加速?gòu)亩岣咪秩拘阅?。這個(gè)渲染器比渲染器有更好的性能。聲明構(gòu)造器是一個(gè)可選對(duì)象，包含用來(lái)定義渲染器行為的屬性。所用的渲染上下文對(duì)象。設(shè)置背景色和背景色透明度渲染器渲染器不使用來(lái)繪制場(chǎng)景，而使用相對(duì)較慢的。

渲染器api WebGL渲染器（WebGLRenderer）

WebGL渲染器使用WebGL來(lái)繪制您的場(chǎng)景，如果您的設(shè)備支持的話。使用WebGL將能夠利用GPU硬件加速?gòu)亩岣咪秩拘阅?。這個(gè)渲染器比 Canvas渲染器(CanvasRenderer) 有更好的性能。

聲明 
var renderer = new THREE.WebGLRenderer();
構(gòu)造器（Constructor）

WebGLRenderer( parameters )

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

canvas: 一個(gè)用來(lái)繪制輸出的 Canvas 對(duì)象。
context: 所用的 渲染上下文(RenderingContext) 對(duì)象。
precision : 著色器的精度?？梢允?highp", "mediump" 或 "lowp". 默認(rèn)為"highp"，如果設(shè)備支持的話。
alpha : 是否可以設(shè)置背景色透明 , 默認(rèn)為 false.
premultipliedAlpha — Boolean, 默認(rèn)為 true.
antialias: 是否開(kāi)啟反鋸齒, 默認(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,       //是否開(kāi)啟反鋸齒  
        precision:"highp",    //著色精度選擇  
        alpha:true,           //是否可以設(shè)置背景色透明  
        premultipliedAlpha:false,  
        stencil:false,  
        preserveDrawingBuffer:true, //是否保存繪圖緩沖  
        maxLights:1           //maxLights:最大燈光數(shù)  
    });
常用屬性 domElement

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

常用方法 render

渲染器最重要的方法，使用相機(jī)渲染一個(gè)場(chǎng)景。

render ( scene, camera, renderTarget, forceClear )

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

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)建一個(gè)具有紅色背景的渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize( 200, 100 );
renderer.setClearColor( 0xff0000 );
應(yīng)用 
//開(kāi)啟Three.js渲染器:WebGLRenderer
　　　　　　　
//聲明全局變量
var renderer;
function initThree(){
    
    //獲取容器的寬高
    width = document.getElementById("canvas3d").clientWidth;     //獲取畫(huà)布「canvas3d」的寬
    height = document.getElementById("canvas3d").clientHeight;   //獲取畫(huà)布「canvas3d」的高
    
    //聲明渲染器對(duì)象：WebGLRenderer
    renderer=new THREE.WebGLRenderer({
        antialias:true,       //是否開(kāi)啟反鋸齒
        precision:"highp",    //著色精度選擇
        alpha:true,           //是否可以設(shè)置背景色透明
        premultipliedAlpha:false,
        stencil:false,
        preserveDrawingBuffer:true, //是否保存繪圖緩沖
        maxLights:1           //maxLights:最大燈光數(shù)
    });
    
    //指定渲染器的高寬（和畫(huà)布框大小一致）
    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來(lái)繪制場(chǎng)景，而使用相對(duì)較慢的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();
    }

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/94016.html

相關(guān)文章

  • Three.js學(xué)習(xí)筆記

    摘要：和使用的坐標(biāo)系是右手坐標(biāo)系。與都是指到照相機(jī)位置在深度平面的位置，而照相機(jī)不應(yīng)該拍攝到其后方的物體，因此這兩個(gè)值應(yīng)該均為正值。 Three.js是一個(gè)3D JavaScript庫(kù)。Three.js封裝了底層的圖形接口，使得程序員能夠在無(wú)需掌握繁冗的圖形學(xué)知識(shí)的情況下，也能用簡(jiǎn)單的代碼實(shí)現(xiàn)三維場(chǎng)景的渲染。 一個(gè)典型的Three.js程序至少要包括渲染器（Renderer）、場(chǎng)景（Sc...

    20171112 評(píng)論0 收藏0

  • WebGL three.js學(xué)習(xí)筆記 創(chuàng)建three.js代碼的基本框架

    摘要：學(xué)習(xí)學(xué)習(xí)筆記介紹是一種繪圖協(xié)議，它把和結(jié)合在一起，通過(guò)增加的一個(gè)綁定，可以為提供硬件加速渲染。環(huán)境搭建為了以后的學(xué)習(xí)方便，首先是搭建一個(gè)萬(wàn)能框架，所有的開(kāi)發(fā)都可以在此框架上進(jìn)行。 WebGL學(xué)習(xí)----Three.js學(xué)習(xí)筆記（1） webgl介紹 WebGL是一種3D繪圖協(xié)議，它把JavaScript和OpenGL ES 2.0結(jié)合在一起，通過(guò)增加OpenGL ES 2.0的一個(gè)Ja...

    mtunique 評(píng)論0 收藏0

  • three.js筆記——（1）入門(mén)

    摘要：入門(mén)這部分內(nèi)容的目標(biāo)是簡(jiǎn)單地介紹，我們首先講如何用來(lái)實(shí)現(xiàn)一個(gè)旋轉(zhuǎn)的立方體。具體的實(shí)例將會(huì)給出，以防你卡住或者需要幫助。透視投影照相機(jī)的構(gòu)造函數(shù)是，其中是可視角度為，通常是容器的寬高比是近斷距離，是遠(yuǎn)端距離。 入門(mén) 這部分內(nèi)容的目標(biāo)是簡(jiǎn)單地介紹three.js，我們首先講如何用three.js來(lái)實(shí)現(xiàn)一個(gè)旋轉(zhuǎn)的立方體。具體的實(shí)例將會(huì)給出，以防你卡住或者需要幫助。 在html文件中引入thr...

    ephererid 評(píng)論0 收藏0

  • WebGL three.js學(xué)習(xí)筆記 使用粒子系統(tǒng)模擬時(shí)空隧道（蟲(chóng)洞）

    摘要：學(xué)習(xí)筆記使用粒子系統(tǒng)模擬時(shí)空隧道本例的運(yùn)行結(jié)果如圖時(shí)空隧道演示地址的粒子系統(tǒng)的粒子系統(tǒng)主要是依靠精靈體來(lái)創(chuàng)建的，要實(shí)現(xiàn)中的粒子系統(tǒng)創(chuàng)建，一般有兩種方式。 WebGL three.js學(xué)習(xí)筆記 使用粒子系統(tǒng)模擬時(shí)空隧道 本例的運(yùn)行結(jié)果如圖：showImg(https://img-blog.csdnimg.cn/20190426222855492.png?x-oss-process=ima...

    Guakin_Huang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<