1、準(zhǔn)備開發(fā)環(huán)境
<!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="/libs/three.r73.js"></script>
<script>
// Our Javascript will go here.
</script>
</body>
</html>
2、創(chuàng)建一個(gè)場(chǎng)景
在Three.js中，要渲染物體到網(wǎng)頁(yè)中，我們需要3個(gè)組建：場(chǎng)景（scene）、相機(jī)（camera）和渲染器（renderer）。有了這三樣?xùn)|西，才能將物體渲染到網(wǎng)頁(yè)中去。
拿電影來(lái)類比的話，場(chǎng)景對(duì)應(yīng)于整個(gè)布景空間，相機(jī)是拍攝鏡頭，渲染器用來(lái)把拍攝好的場(chǎng)景轉(zhuǎn)換成膠卷（對(duì)于網(wǎng)頁(yè)來(lái)講，是電腦屏幕）。 場(chǎng)景和相機(jī)代表了3D觀察空間和數(shù)據(jù)模型，渲染器則包含了WebGL繪圖上下文和著色器。
//場(chǎng)景 在Threejs中場(chǎng)景就只有一種，用THREE.Scene來(lái)表示，要構(gòu)件一個(gè)場(chǎng)景也很簡(jiǎn)單，只要new一個(gè)對(duì)象就可以了
var scene = new THREE.Scene();
//渲染器
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
// 設(shè)置渲染器的大小為窗口的內(nèi)寬度，也就是內(nèi)容區(qū)的寬度
var renderer = new THREE.WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
Three.js的架構(gòu)支持多種camera，這里使用最常見的遠(yuǎn)景相機(jī)（PerspectiveCamera），也就是類似于人眼觀察的方式。第一個(gè)屬性75設(shè)置的是視角（field of view）。
3、渲染器
為了創(chuàng)建一個(gè)立方體，我們需要使用盒子模型（BoxGeometry），這是一個(gè)包含立方體所有頂點(diǎn)和填充面的對(duì)象。
Three.js支持多種材料，現(xiàn)在我們只使用 網(wǎng)孔基礎(chǔ)材料（MeshBasicMaterial）。 所有材料都含有一個(gè)屬性對(duì)象。這里簡(jiǎn)單起見，我們只提供了顏色值為0x00ff00，表示綠色。這和CSS和Photoshop中16進(jìn)制顏色值一樣。
我們需要一個(gè)網(wǎng)孔(Mesh)。網(wǎng)孔是用來(lái)承載幾何模型的一個(gè)對(duì)象，還可以把材料應(yīng)用到它上面，然后添加到場(chǎng)景中完成旋轉(zhuǎn)動(dòng)畫。
默認(rèn)情況下，當(dāng)我們調(diào)用 scene.add() 時(shí)，對(duì)象將被添加到原點(diǎn)處，即坐標(biāo)點(diǎn)(0,0,0)，這將導(dǎo)致相機(jī)和立方體發(fā)生空間重疊。為了避免這樣，我們把相機(jī)（camera）的位置移出來(lái)一些。
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;
4、添加物體到場(chǎng)景中
這將創(chuàng)建一個(gè)循環(huán)，以每秒60次的頻率來(lái)繪制場(chǎng)景。熟悉requestAnimationFrame這個(gè)函數(shù)，它用來(lái)替代 setInterval， 這個(gè)新接口具備多個(gè)優(yōu)點(diǎn)，比如瀏覽器Tab切換后停止渲染以節(jié)約資源、和屏幕刷新同步避免無(wú)效刷新、在不支持該接口的瀏覽器中能安全回退為setInterval。
function render() {
requestAnimationFrame( render );
renderer.render( scene, camera );
}
render();
5、創(chuàng)建動(dòng)畫
基本上，如果要改變立方體的運(yùn)動(dòng)，我們都是在render循環(huán)中處理。把如下代碼加在 render 函數(shù)中 renderer.render 這行代碼之前
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
恭喜你，你已經(jīng)完成你自己的第一個(gè)Three.js程序
以下是全部代碼（最好自己寫一次）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MyFirstThreeD</title>
</head>
<body>
<script src="http://cdn.bootcss.com/three.js/r82/three.min.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: 11397866 } );
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>
