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

資訊專欄INFORMATION COLUMN

three.js中文文檔 1.創(chuàng)建場景

Michael_Lin / 2881人閱讀

摘要：創(chuàng)建場景標(biāo)簽本節(jié)目標(biāo)是為做簡介。我們從使用旋轉(zhuǎn)立方體來搭建場景開始。我們現(xiàn)在創(chuàng)建了場景，攝像機(jī)和渲染器。我們需要來創(chuàng)建立方體。這會導(dǎo)致攝像機(jī)和立方體內(nèi)部重疊。這會創(chuàng)建一個讓渲染器每秒繪制一幀的循環(huán)。結(jié)果恭喜你現(xiàn)在創(chuàng)建好了第一個應(yīng)用。

1.創(chuàng)建場景

標(biāo)簽： three.js

本節(jié)目標(biāo)是為 three.js 做簡介。我們從使用旋轉(zhuǎn)立方體來搭建場景開始。如果遇到困難需要幫助，頁面底部有可參考的源碼。

開始前

在計算機(jī)中保存如下 HTML 代碼，并在 js 目錄下包含 three.js，然后在瀏覽器中打開


    
        
        My first three.js app

接下來的代碼都會下載 script 標(biāo)簽中

創(chuàng)建示例場景

為了利用three.js來進(jìn)行展示，我們需要三種元素：場景，攝像機(jī)，渲染器，以便來渲染攝像機(jī)中的場景。

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

讓我們花點時間來解釋發(fā)生了什么。我們現(xiàn)在創(chuàng)建了場景，攝像機(jī)和渲染器。

在 three.js 中有幾種攝像機(jī)。我們暫時用的是 PerspectiveCamera （透視攝像機(jī)）

它的第一個屬性是視圖角（FOV)，它 是能看見的視圖范圍，其值表示角度大小。

第二個屬性是寬高比。大多數(shù)情況你想要使用被高除過之后的寬度，不然會發(fā)生像在寬屏電視上放舊電影的情況 —— 圖像看起來被壓扁了。

后面兩個屬性是近景面和遠(yuǎn)景面。只會渲染這兩個面之間的區(qū)域。目前你不必關(guān)心這些，使用這些參數(shù)能提高性能。

接下來談?wù)勪秩酒?。這便是神奇之處。除了我們這里用的 WebGLRenderer 外， three.js 還提供一些渲染器用在不支持 WebGL 的老舊瀏覽器上。

除了創(chuàng)建渲染器實例，我們也需要設(shè)置應(yīng)用渲染的尺寸。推薦使用填充整個應(yīng)用的寬高 —— 本例中是瀏覽器窗口的寬高。對于性能優(yōu)先的應(yīng)用，你能使用 setSize 來設(shè)置更小的值，比如 window.innerHeight/2， window.innerWidth/2，會渲染一半的尺寸。

如果你想低分辨率地渲染整個尺寸，你可以設(shè)置 setSize 的第三個參數(shù) — uodateStyle 為 false，如果 canvas 元素寬高都為 100%，則會以 1/2 分辨率渲染應(yīng)用。

再爾，我們需要在 HTML 中添加被渲染的元素。渲染器通過 canvas 來給我們展示場景。

“都很好，但之前說的立方體呢” 讓我們現(xiàn)在添加。

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

我們需要 BoxGeometry來創(chuàng)建立方體。這個對象包含立方體所有的點（頂點）和填充（面）。我們以后會討論。

除了幾何體外，我們還需要材質(zhì)為其上色。three.js 提供了一些材質(zhì)，但我們暫且使用 MeshBasicMaterial。所有材質(zhì)接受并應(yīng)用一個包含所有屬性的對象。為簡單起見，我們僅僅提供一個顏色屬性： 綠色 —— 0x00ff00。和 CSS 和 PS 里的一樣采用十六進(jìn)制的顏色。

我們需要的第三個要素是 Mesh。 mesh 是一個將材質(zhì)應(yīng)用到幾何體上的對象，然后我們能將其放入場景中，并自由移動。

當(dāng)我們調(diào)用 scene.add()，我們添加的會默認(rèn)顯示在坐標(biāo)（0，0,0,）處。這會導(dǎo)致攝像機(jī)和立方體內(nèi)部重疊。為了避免這點，我們簡單地把攝像機(jī)往外移一點。

渲染場景

如果你在 HTML 文件中復(fù)制了如上代碼，屏幕不會顯示東西。因為我們還沒渲染場景。所以我們需要調(diào)用渲染器或者動畫循環(huán)。

function animate() {
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
}
animate();

這會創(chuàng)建一個讓渲染器每秒繪制一幀的循環(huán)。如果你對網(wǎng)頁游戲編程不了解，你可能會說“為什么不 寫setInterval 函數(shù)呢？”事實上，我們可以，但是 requestAnimationFrame 好處更多。最重要的好處是當(dāng)瀏覽器切換到另一個標(biāo)簽頁時，requestAnimationFrame 會暫停渲染，因此不會浪費寶貴的處理能力和電池壽命。

讓立方體動起來

如果你插入了我們剛剛創(chuàng)建的代碼，你應(yīng)該會看見一個綠色的立方體。讓它旋轉(zhuǎn)起來不至于單調(diào)。

在animate 函數(shù)中的 renderer.render 上添加如下代碼：

cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

它會按幀運行（每秒60幀），并賦予立方體優(yōu)雅的動畫?；旧希瑧?yīng)用運行時，你想移動或改變?nèi)魏卧?，必須通過動畫循環(huán)。你當(dāng)然在此處能調(diào)用其他函數(shù)，以免animate函數(shù)上百行代碼結(jié)尾。

結(jié)果

恭喜！你現(xiàn)在創(chuàng)建好了第一個 three.js 應(yīng)用。很簡單，但總得突破。

完整代碼參考如下。琢磨一下并深刻理解其工作機(jī)理


    
        My first three.js app

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/89500.html

相關(guān)文章

  • three.js 簡介

    摘要：對于自身不能發(fā)光的物體，需要給場景添加光源從而達(dá)到可視的效果。中渲染陰影的開銷比較大，所以默認(rèn)物體是沒有陰影的，需要單獨開啟。主要用于檢測動畫運行時的幀數(shù)，可以顯示表示每秒多少幀和每幀多少毫秒，越大越好，但太大會影響性能，一般為左右。 一、WebGL 與 three.js WebGL（Web Graphics Library）是一種3D繪圖協(xié)議，它允許把JavaScript和OpenG...

    yankeys 評論0 收藏0

  • SegmentFault 技術(shù)周刊 Vol.35 - WebGL：打開網(wǎng)頁看大片

    摘要：在文末，我會附上一個可加載的模型方便學(xué)習(xí)中文藝術(shù)字渲染用原生可以很容易地繪制文字，但是原生提供的文字效果美化功能十分有限。 showImg(https://segmentfault.com/img/bVWYnb?w=900&h=385); WebGL 可以說是 HTML5 技術(shù)生態(tài)鏈中最為令人振奮的標(biāo)準(zhǔn)之一，它把 Web 帶入了 3D 的時代。 初識 WebGL 先通過幾個使用 Web...

    objc94 評論0 收藏0

  • WebGL入門demo

    摘要：而是一款框架，由于其易用性被廣泛應(yīng)用。如果要學(xué)習(xí)，拋棄那些復(fù)雜的原生接口從這款框架入手是一個不錯的選擇。需要相機(jī)，演員這里是地球，場景，導(dǎo)演。最后拍好了戲交給渲染器來制片，發(fā)布。狀態(tài)也在不停的更新。 WebGL入門demo three.js入門 開場白 哇哦，繪制氣球耶，在網(wǎng)頁上？對??！厲害了！3D效果圖也能在網(wǎng)頁上繪制出來啊，這么好玩的事情，趕緊來看看！ 這里是屬于WebGL的應(yīng)用，...

    lijinke666 評論0 收藏0

  • 【Three.js】Three.js學(xué)習(xí)記錄

    摘要：上帝覺得缺少了些生氣，便用泥巴捏了一個小人兒，不叫亞當(dāng)，她叫小芳。接下來預(yù)先恭喜你，你可以成為這網(wǎng)頁世界的一個小上帝。使用可以向場景中發(fā)射光線。在下述案例中，從攝像機(jī)的位置向場景中鼠標(biāo)的點擊位置發(fā)射光線。 先得擺出幾個關(guān)鍵詞：場景、燈光、模型、材質(zhì)、貼圖與紋理、相機(jī)、渲染器。然后我開始裝模作樣地解釋： 上帝說，要有場景！于是就有了場景，場景去納這萬事萬物。 上帝說，要有光！于是就有了光...

    chanthuang 評論0 收藏0

  • 【Three.js】Three.js學(xué)習(xí)記錄

    摘要：上帝覺得缺少了些生氣，便用泥巴捏了一個小人兒，不叫亞當(dāng)，她叫小芳。接下來預(yù)先恭喜你，你可以成為這網(wǎng)頁世界的一個小上帝。使用可以向場景中發(fā)射光線。在下述案例中，從攝像機(jī)的位置向場景中鼠標(biāo)的點擊位置發(fā)射光線。 先得擺出幾個關(guān)鍵詞：場景、燈光、模型、材質(zhì)、貼圖與紋理、相機(jī)、渲染器。然后我開始裝模作樣地解釋： 上帝說，要有場景！于是就有了場景，場景去納這萬事萬物。 上帝說，要有光！于是就有了光...

    李濤 評論0 收藏0

發(fā)表評論

0條評論

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