背景
一直想研究下web頁面的3D效果，最后選擇了一個比較的成熟的框架Three.js下手
ThreeJs官網
ThreeJs-github;
接下來我會陸續翻譯 Three.js官網的文檔，部分文字和代碼為我個人添加。
第一部分：three.js介紹
創建場景
這部分的目標是為Three.js做一個簡單的介紹，我們會以創建一個場景，一個旋轉的立方里開始，文章的結尾會有一個可運行的完整示例為你解惑。
開始之前
在你使用Three.js之前，你需要在你的電腦上建立文件存放下面的html，並需要建立js目錄將three.js放入，打開瀏覽器瀏覽。
<!DOCTYPE html>
<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標簽里
創建場景
事實上使用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);
讓我們花點時間解釋下上面的代碼做了些什么，現在我們建立了場景，相機和渲染器
Three.js有幾種不同的相機，現在我們使用PerspectiveCamera.第一個屬性是視角，我們可以把相機理解為我們的眼睛, 第二個屬性是寬高比，你通常希望使用元素的寬度除以高度，或者理解為當你在一個寬屏電視上看一個老電影是也會得到這種結果－圖像會被拉伸，接下來的兩個屬性是遠近剪切面，什么意思呢？字面上意思是：物體遠離相機的far值或者比相機的near值還要近都不會被渲染! 看到這個我有點懵逼查了半天 投影矩陣 這篇文章講的大概能看懂是什么意思。你現在不用擔心這個，但是你可能會在你的app里使用其它值來達到更好的展現 ！
接下來時渲染器，這是最神奇的地方，除了WebGLRenderer之外在這里使用其它的東西來兼容老的瀏覽器活着不支持WebGl的瀏覽器。
除了創建renderer實例，我們還需要設置渲染的尺寸，最好使用瀏覽器的寬度高度來填充應用，考慮性能，你仍可以setSize小的values。比如:window.innerWidth/2和 window.innerHeight/2,這樣可以渲染半個屏幕
如果你想保持渲染的尺寸，但渲染在一個低分辨率的設備上，你可以調用setSize的updateStyle（第三個屬性）設置為false,比如 setSize(window.innerWidth/2, window.innerHeight/2, false) 這樣將會渲染在低分辨率的設備上但Canvas 100%顯示
最后，我們添加渲染元素到HTML文檔，這是一個canvas標簽的渲染器來展示場景
"這非常好，但是立方體呢" 讓我們繼續
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，這是一個包含點，面，填充物的立方題對象，我們會在后面細細講。
除了geometry，我們還需要material給它上色，Three.js有許多的materia，但我們現在使用MeshBasicMaterial，所有的meterial需要一個對象的屬性將被應用，為了簡單其間，我們只支持顏色屬性0x00ff00綠色，跟css和photoshop的顏色一樣
第三個事是我們需要一個Mash，mash是一個對象需要一個geometry和一個material，然后我們可以插入到場景中，也可以自由移除，
默認情況下,當我們調用scene.add(),我們將添加到坐標(0,0,0)。這將導致相機和cube在彼此內部。為了避免這種情況,我們將鏡頭移出一點。
渲染場景
如果你從上面的代碼復制到我們創建的HTML文件之前,您無法看到任何東西。這是因為我們還沒有呈現任何。為此,我們需要渲染循環
function render(){
requestAnimationFrame(render);
renderer.render(scne,camera);
}
render();
這將創建一個循環使渲染器每秒60次的頻率繪畫。如果你在寫瀏覽器游戲,你可能會說“為什么我們不創建一個setInterval ?其實我們是可以的,但requestAnimationFrame有許多優點。最重要的是當用戶導航到另一個瀏覽器選項卡它暫停,因此不浪費他們寶貴的處理能力和電池壽命。可以在控制台試試下面這段代碼，切換tab觀察！
function render(){
requestAnimationFrame(render);console.log(1);
}
render();
使cube動起來
如果將上面所有的代碼插入到我們開始創建的文件上,您應該看到一個綠色的盒子。接下來讓它更有趣的旋轉。
添加下面的代碼到渲染器，調用renderer.render 在render函數里
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
每一幀的運行(60次/秒),並使立方體旋轉動畫。基本上,任何你想要移動或改變應用程序運行時必須經過渲染循環。你當然可以調用其他函數,這樣你就不會得到一個數百行的渲染函數。
寫在最后
恭喜你，你完成了你的第一個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 render = function () {
requestAnimationFrame( render );
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
};
render();
</script>
</body>
</html>
總結
- 創建一個場景 scene
- 創建一個相機 camera
- 創建一個渲染器 renderer
- 設置渲染器的寬高度
- 將渲染器元素插入文檔
- 創建盒子的幾何（房子結構） geometry
- 創建盒子的材料（裝修） meterial
- 創建一個完整的盒子 Mesh(geomety,meterial)
- 將創建好的盒子塞到創建的場景中
- 循環渲染