成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

【three.js學習筆記】渲染器

劉玉平 / 3066人閱讀

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

渲染器api WebGL渲染器（WebGLRenderer）

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

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

WebGLRenderer( parameters )

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

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:最大燈光數(shù)  
    });
常用屬性 domElement

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

常用方法 render

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

render ( scene, camera, renderTarget, forceClear )

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

setSize ( width, height, updateStyle )

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

 var renderer = new THREE.WebGLRenderer();

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

    document.body.appendChild(renderer.domElement);
setClearColor ( color, alpha )

設置清除的顏色和透明度。

// 創(chuàng)建一個具有紅色背景的渲染器
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:最大燈光數(shù)
    });
    
    //指定渲染器的高寬（和畫布框大小一致）
    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();
    }

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

轉載請注明本文地址：http://systransis.cn/yun/94016.html

相關文章

  • Three.js學習筆記

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

    20171112 評論0 收藏0

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

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

    mtunique 評論0 收藏0

  • three.js筆記——（1）入門

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

    ephererid 評論0 收藏0

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

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

    Guakin_Huang 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<