什么是Three.js？
如果你正在讀這篇文章，你可能對Three.js有一定的了解，那我們來簡單地介紹下Three.js是什么.
Three.js是一個庫，使得WebGL的3D效果在瀏覽器中運用很容易。而在原始的WebGL中一個簡單的立方體會變成數(shù)百Javascript和著色器代碼的行，而一個Three.js只需要一點點代碼.
本節(jié)目標是為 three.js 做簡介。我們從使用旋轉(zhuǎn)立方體來搭建場景開始。如果遇到困難需要幫助，頁面底部有可參考的源碼。
一個場景至少需要的三種類型組件
開始前
在計算機中保存如下 HTML 代碼，并在 js 目錄下包含 three.js，然后在瀏覽器中打開
<html>
<head>
<meta charset=utf-8>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="js/three.js"></script>
<script>
// Our Javascript will go here.
</script>
</body>
</html>接下來的代碼都會下載 script 標簽中
創(chuàng)建示例場景
為了利用three.js來進行展示，我們需要三種元素：場景，攝像機，渲染器，以便來渲染攝像機中的場景。
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)建了場景，攝像機和渲染器。
在 three.js 中有幾種攝像機。我們暫時用的是 PerspectiveCamera （透視攝像機）
它的第一個屬性是視圖角（FOV)，它 是能看見的視圖范圍，其值表示角度大小。
第二個屬性是寬高比。大多數(shù)情況你想要使用被高除過之后的寬度，不然會發(fā)生像在寬屏電視上放舊電影的情況 —— 圖像看起來被壓扁了。
后面兩個屬性是近景面和遠景面。只會渲染這兩個面之間的區(qū)域。目前你不必關心這些，使用這些參數(shù)能提高性能。
接下來談談渲染器。這便是神奇之處。除了我們這里用的 WebGLRenderer 外， three.js 還提供一些渲染器用在不支持 WebGL 的老舊瀏覽器上。
除了創(chuàng)建渲染器實例，我們也需要設置應用渲染的尺寸。推薦使用填充整個應用的寬高 —— 本例中是瀏覽器窗口的寬高。對于性能優(yōu)先的應用，你能使用 setSize 來設置更小的值，比如 window.innerHeight/2， window.innerWidth/2，會渲染一半的尺寸。
如果你想低分辨率地渲染整個尺寸，你可以設置 setSize 的第三個參數(shù) — uodateStyle 為 <font color="#FF1493">false</font> ，如果 canvas 元素寬高都為 100%，則會以 1/2 分辨率渲染應用。
再爾，我們需要在 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ì)接受并應用一個包含所有屬性的對象。為簡單起見，我們僅僅提供一個顏色屬性： 綠色 —— <font color="#00ff00">0x00ff00</font> 。和 CSS 和 PS 里的一樣采用十六進制的顏色。
我們需要的第三個要素是 Mesh。 mesh 是一個將材質(zhì)應用到幾何體上的對象，然后我們能將其放入場景中，并自由移動。
當我們調(diào)用 scene.add() ，我們添加的會默認顯示在坐標（0，0,0,）處。這會導致攝像機和立方體內(nèi)部重疊。為了避免這點，我們簡單地把攝像機往外移一點。
渲染場景
如果你在 HTML 文件中復制了如上代碼，屏幕不會顯示東西。因為我們還沒渲染場景。所以我們需要調(diào)用渲染器或者動畫循環(huán)。
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();這會創(chuàng)建一個讓渲染器每秒繪制一幀的循環(huán)。如果你對網(wǎng)頁游戲編程不了解，你可能會說“為什么不 寫setInterval 函數(shù)呢？”事實上，我們可以，但是 requestAnimationFrame 好處更多。最重要的好處是當瀏覽器切換到另一個標簽頁時，requestAnimationFrame 會暫停渲染，因此不會浪費寶貴的處理能力和電池壽命。
讓立方體動起來
如果你插入了我們剛剛創(chuàng)建的代碼，你應該會看見一個綠色的立方體。讓它旋轉(zhuǎn)起來不至于單調(diào)。
在animate 函數(shù)中的 renderer.render 上添加如下代碼：
cube.rotation.x += 0.01; cube.rotation.y += 0.01;
它會按幀運行（每秒60幀），并賦予立方體優(yōu)雅的動畫?；旧希瑧眠\行時，你想移動或改變?nèi)魏卧兀仨毻ㄟ^動畫循環(huán)。你當然在此處能調(diào)用其他函數(shù)，以免animate函數(shù)上百行代碼結(jié)尾。
結(jié)果
恭喜！你現(xiàn)在創(chuàng)建好了第一個 three.js 應用。很簡單，但總得突破。
完整代碼參考如下。琢磨一下并深刻理解其工作機理
<html>
<head>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="js/three.js"></script>
<script>
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 );
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;
var animate = function () {
requestAnimationFrame( animate );
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
};
animate();
</script>
</body>
</html>總結(jié)
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2024 51dongshi.com 版權(quán)所有
違法及侵權(quán)請聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務所王興未律師提供法律服務
