1.webGL
一種網絡標准，定義了一些較底層的圖形接口。
2.Three.js
一個3Djs庫，webGL開源框架中比較優秀的一個。除了webGL以外，Three.js還提供了基於Canvas、SVG標簽的渲染器。
這是一個開源項目。
3.環境
找一個喜歡的jsIDE。調試建議使用Chrome或者Firefox。
4.下載
5.使用
<head>
<script type="text/javascript" src="js/three.js"></script>
</head>
webGL的渲染需要canvas，Three.js可以生成，也可以自定義canvas：
<body onload="init()">
<canvas id="mainCanvas" width="400px" height="300px" ></canvas>
</body>
在js中定義一個init函數，在HTML加載后執行：
function init(){ // ...
}
Three.js程序要包括三大組建：
場景（Scene）、相機（Camera）、渲染器（Renderer），以及你創建的物體。
6.渲染器（Renderer）
渲染器將和Canvas元素進行綁定，接着上面的：
var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById(‘mainCanvas’) });
如果想要Three.js生成Canvas元素，在HTML中就不需要定義canvas，在js中可以這樣寫：
var renderer = new THREE.WebGLRenderer(); renderer.setSize(400,300); document.getElementsByTagName(‘body’)[0].appendChild(renderer.domElement);
第二行設置了Canvas的寬高。第三行將渲染器對應的Canvas元素添加到<body>中。
下面這句可以設置背景為黑色：
renderer.setClearColor(0x000000);
7.場景（Scene）
在Three.js中添加的物體都是添加到場景中的。在程序最開始的時候進行實例化，然后將物體添加到場景中即可。
var scene = new THREE.Scene();
8.照相機（Camera）
webGL和Three.js使用的坐標系是右手坐標系：
相機分正投影相機和透視投影相機。這里先定義一直透視投影的照相機，：
var camera = new THREE.PerspectiveCamera(45,4/3,1,1000);
//四個參數分別對應：視角、近處的裁面的距離、遠處的裁面的距離、實際窗口的縱橫比（后面會詳細討論）
camera.position.set(0,0,5);//設置相機位置
scene.add(camera);//添加到場景中。
9.長方體
創建一個x,y,z方向長度分別為1、2、3的紅色長方體：
var cube = new THREE.Mesh(new THREE.CubeGeometry(1,2,3),
new THREE.MeshBasicMaterial({ color: 0xff0000 }) ); scene.add(cube);
其中，THREE.Mesh表示網格模型；THREE.CubeGeometry表示立方體盒子；MeshBasicMaterial是一種材質：對光照無感，給幾何體一種簡單的顏色或顯示線框。最后添加到場景中。
10.渲染
在定義了場景中的物體，設置好的照相機之后，渲染器就知道如何渲染出二維的結果了。調用渲染器的渲染函數，就能使其渲染一次了。
renderer.render(scene, camera);
11.示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3.js測試一</title>
</head>
<body onload="init()">
<canvas id="mainCanvas" width="400px" height="300px" ></canvas>
<script type="text/javascript" src="js/three.min.js"></script><!--路徑改成你的-->
<script type="text/javascript">
function init() { // renderer 渲染器
var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('mainCanvas') //綁定canvas }); renderer.setClearColor(0x000000); // black
// scene 場景
var scene = new THREE.Scene(); //實例化場景 // camera 照相機
var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000); //透視投影相機參數設置 camera.position.set(0, 0, 5); //相機位置設置 scene.add(camera); //添加到場景 // a cube in the scene 創建的物體
var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3), //創建網格，參數一：幾何體（立方體） new THREE.MeshBasicMaterial({ //參數二：材質（網格基礎材質）
color: 0xff0000 //設置顏色 }) ); scene.add(cube); //添加到場景 // render 渲染
renderer.render(scene, camera); } </script>
</body>
</html>
渲染的效果是：
下一篇： Three.js基礎探尋二
整理自張雯莉《Three.js入門指南》
其他參考：WebGL中文網