本節的目的是介紹three.js。我們將從創建一個場景以及場景內的一個旋轉的立方體開始。在本文最後將會給出相應的例子。
什麼是Three.js
如果你閱讀本文，將會大概瞭解什麼是Three.js，它將爲你做什麼。
Three.js是一個簡單的WebGL的類庫（主要用於在瀏覽器展現3D圖像）。若在一個基礎的WebGL之上構造一個立方體，程序員將會寫數百行的js代碼和着色代碼（CSS？），而在Three.js下，則僅僅需要一個函數。
開始之前
在你使用Three.js之前，你需要一個地方去顯示它。將下面寫出的HTML代碼複製到你本機中的文件內，並將three.min.js拷貝到你電腦裏的相應位置，並用瀏覽器打開該文件
<html>
<head>
<title>My first three.js app</title>
<style>
body{ margin:0}
canvas { width:100%; height:100% }
</style>
</head>
<body>
<script src="three.min.js"></script>
<script>
//do someting.
</script>
</body><code class=" prettyprint"><span class="tag"></span></code>創建一個場景
若要用Three.js真正能夠顯示模型，需要三個對象：場景（scene）、相機（camera）、渲染器（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中，會有幾種不同的相機，我們在之後的章節對其進行討論。目前，我們先使用PrespectiveCamera。
第一個屬性是視野（field of view）
第二個屬性是縱橫比（aspect ratio）。通常來說，縱橫比是寬度除以高度，也可以通過定義來實現寬屏等其他效果。
第三個和第四個屬性分別是近距離（near）和遠距離（far）剪切面。這兩個參數描述的是當物體距離相機超過規定的遠距離或過分接近相機超過規定的近距離時，物體將不會被渲染。目前來說先不用擔心這一方面的問題，等之後需要優化的時候再說。
THREE.PerspectiveCamera(field_of_view, aspect_ratio,near,far);
下一個對象是渲染器。我們這裏使用WebGLRenderer()。當用戶的瀏覽器過老，不支持WebGL時，它會給出相應的錯誤原因提示。
在初始化渲染器時，我們需要設置渲染長寬，
最後，我們將渲染器元素添加到我們的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
第三，我們需要一個Mesh（找不到合適的翻譯，大概意思是連接關係之類），mesh是一種承載幾何物體並將材質賦予該物體的對象，我們可以將它放置在場景中，並能夠自由移動。
當在默認情況下，我們調用scene.add()方法，物體將會放置到場景的（0,0,0）位置。這樣會導致物體與攝像機重疊，爲了避免這樣的事情，我們將相機移動幾個單元。
渲染場景
如果你將上述代碼拷貝到HTML中去，並不會顯示什麼東西，原因就在於你還沒有渲染。所以，我們需要調用渲染循環（render loop）
function render(){
requestAnimationFrame(render);
renderer.render(scene, camera);
}
render();這樣就會建立一個每秒60次的循環渲染（60fps）。採用requestAnimationFrame的方式較之使用setInterval的方式更具優點。當用戶選擇其他頁面標籤時，渲染將會暫停。
讓方塊動起來
在renderer.render上添加代碼：
cube.relation.x += 0.1;
cube.relation.y += 0.1;該程序段將會在每一幀執行一次，作用是讓方塊能夠旋轉起來。
最後
<html>
<head>
<title>My first Three.js app</title>
<style>
body { margin : 0; }
canvas { width : 100%; height : 100% }
</style>
</head>
<body>
<script src="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 meterial = new THREE.MeshBasicMeterial( { color : 0x00FF00 } );
var cube = new THREE.Mesh(geometry, meterial);
scen.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>