本篇教程通過一個示例簡單的介紹了threejs主要概念，以及在threejs中場景的呈現邏輯。最後有示例的代碼，可以自己運行嘗試，可以關注公衆號【磚人專語】分享更多threeJS、webGL有趣的事情
開始之前
在使用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來展示任何物體，我們需要三樣東西: scene, camera and renderer, 即場景、相機和渲染器。我們用相機來渲染場景。
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，創建PerspectiveCamera的第一個參數是視野，field of view，FOV定義了在任何一刻我們能夠看到的場景的範圍，單位是度數。
第二個參數是縱橫比，aspect ratio，基本上正常都會設置成寬度比高度，反之的話就會看到圖像是被壓扁的效果。
接下來的兩個屬性是近剪裁平面和遠剪裁平面，near and far，這意味着比far更遠或者比near更近的物體是不會被渲染出來的。相機只渲染介於兩者之間的物體。現在你可以先不必考慮這一點，但是在你做自己的程序時，你可能會設置成合適的值來提升性能。
下一個值就是渲染器renderer,這裏就是魔術開始的地方。除了我們這裏使用的WebGLRenderer以外，three.js還有其他的一些渲染器，用於一些就瀏覽器的備用或者由於某些原因不支持webgl的情況。
除了創建渲染器實例之外，我們還需要設置我們希望它渲染我們的應用程序的大小。通常來講，這個大小是瀏覽器窗口的寬度和高度。對於性能密集型應用程序，您還可以爲setSize提供較小的值，例如window.innerWidth / 2和window.innerHeight / 2，這將使應用程序呈現爲一半大小。
如果你希望保持應用程序的大小但是以較低的分辨率渲染它，可以通過調用setSize並將其作爲updateStyle（第三個參數）來調用。例如**setSize(window.innerWidth/2, window.innerHeight/2, false)**將會以canvas100%的寬度和高度渲染，但是分辨率會減少到一半。
最後，我們把renderer元素添加進我們的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這個幾何，它包含了正方體所有的點和麪，除了幾何以外，我們還需要有材質來爲它賦色。three.js裏有很多材質，但是目前我們暫時只關注於MeshBasicMaterial,這裏爲了簡單，我們只給這個材質設置了一個顏色0x00ff00，這裏的顏色和CSS裏或者PS裏顏色一致。
有了幾何和材質，下一個我們需要的是mesh，mesh是一個對象，它有幾何和材質組成，可以添加進場景並且在場景裏自由移動。
我們默認使用**scene.add()**來將物體添加進場景裏，默認位置是(0,0,0),這樣的話我們的相機位置就和這個正方體位置重合了，因此我們將相機的位置往外移動一點。
渲染場景
如果你將上面的代碼複製進HTML，你也看不到任何東西。這是因爲我們還沒有用渲染器渲染。因此我們需要用render去渲染，並且放到動畫循環裏。
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();
這裏我們創建了一個循環，這樣這個渲染器就會在每次屏幕刷新的時候渲染一次場景，這裏你可能會問爲什麼不用setInterval方法，這是因爲requestAnimationFrame有很多好處，其中最大的好處就是當你點擊瀏覽器另外的tab頁時，它就會暫停，因此就不會浪費電腦的性能和電池。
旋轉正方體
如果你將上面的代碼都複製到HTML頁面，你應該可以看到一個綠色的正方體，下面我們再增加一點樂趣，讓它自轉。
將下面的代碼加入上面的動畫循環裏，在render之前。
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
這行代碼會在每一幀運行(通常是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 animate = function () {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
};
animate();
</script>
</body>
</html>
