WebGL（Web圖形庫）是一個JavaScript API，可在任何兼容的Web瀏覽器中渲染高性能的交互式3D和2D圖形，而無需使用插件。WebGL通過引入一個與OpenGL ES 2.0非常一致的API來做到這一點，該API可以在HTML5 <canvas>元素中使用。也就是說WebGL是在瀏覽器中實現三維效果的一套規范。使用WebGL原生的API來寫3D程序是一件非常痛苦的事情，幸好，有很多同行花業余時間寫了一些WebGL開源框架，其中three.js就是非常優秀的一個。
下面是使用Three.js繪制基礎3D圖形的一個示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Three框架</title> <script src='http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js'></script> <style type="text/css"> div#canvas-frame { border: none; cursor: pointer; width: 100%; height: 600px; background-color: #EEEEEE; } </style> <script> var renderer; function initThree() { width = document.getElementById('canvas-frame').clientWidth; height = document.getElementById('canvas-frame').clientHeight; renderer = new THREE.WebGLRenderer({ antialias : true }); renderer.setSize(width, height); document.getElementById('canvas-frame').appendChild(renderer.domElement); renderer.setClearColor(0xFFFFFF, 1.0); } var camera; function initCamera() { camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); camera.position.z = 5; } var scene; function initScene() { scene = new THREE.Scene(); } var light; function initLight() { light = new THREE.DirectionalLight(0xFF0000, 1.0, 0); light.position.set(100, 100, 200); scene.add(light); } var cube; function initObject() { var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); cube = new THREE.Mesh( geometry, material ); scene.add( cube ); } function render() { renderer.clear(); cube.rotation.x += 0.1; cube.rotation.y += 0.1; renderer.render(scene, camera); requestAnimationFrame(render); } function threeStart() { initThree(); initCamera(); initScene(); initLight(); initObject(); render(); } </script> </head> <body onload="threeStart();"> <div id="canvas-frame"></div> </body> </html>
效果：
代碼分解如下：
1、場景
在Three.js中，要渲染物體到網頁中，我們需要3個組件：場景（scene）、相機（camera）和渲染器（renderer）。有了這三樣東西，才能將物體渲染到網頁中去。
記住關建語句：有了這三樣東西，我們才能夠使用相機將場景渲染到網頁上去。創建這三要素的代碼如下：
在Threejs中場景就只有一種，用THREE.Scene來表示，要構件一個場景也很簡單，只要new一個對象就可以了，代碼如下：
var scene; function initScene() { scene = new THREE.Scene(); }
場景是所有物體的容器，如果要顯示一個蘋果，就需要將蘋果對象加入場景中。
2、相機
另一個組件是相機，相機決定了場景中那個角度的景色會顯示出來。相機就像人的眼睛一樣，人站在不同位置，抬頭或者低頭都能夠看到不同的景色。
場景只有一種，但是相機卻又很多種。和現實中一樣，不同的相機確定了呈相的各個方面。比如有的相機適合人像，有的相機適合風景，專業的攝影師根據實際用途不一樣，選擇不同的相機。對程序員來說，只要設置不同的相機參數，就能夠讓相機產生不一樣的效果。
在Threejs中有多種相機，這里介紹兩種，它們是：
透視相機（THREE.PerspectiveCamera）、這里我們使用一個透視相機，透視相機的參數很多，這里先不詳細講解。后面關於相機的那一章，我們會花大力氣來講。定義一個相機的代碼如下所示：
var camera; function initCamera() { camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); camera.position.z = 5; }
3、渲染器
最后一步就是設置渲染器，渲染器決定了渲染的結果應該畫在頁面的什么元素上面，並且以怎樣的方式來繪制。這里我們定義了一個WebRenderer渲染器，代碼如下所示：
var renderer; function initThree() { width = document.getElementById('canvas-frame').clientWidth; height = document.getElementById('canvas-frame').clientHeight; renderer = new THREE.WebGLRenderer({ antialias : true }); renderer.setSize(width, height); document.getElementById('canvas-frame').appendChild(renderer.domElement); renderer.setClearColor(0xFFFFFF, 1.0); }
注意，渲染器renderer的domElement元素，表示渲染器中的畫布，所有的渲染都是畫在domElement上的，所以這里的appendChild表示將這個domElement掛接在body下面，這樣渲染的結果就能夠在頁面中顯示了。
4、添加物體到場景中
那現在，我們將一個物體添加到場景中：
var cube; function initObject() { var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); cube = new THREE.Mesh( geometry, material ); scene.add( cube ); }
代碼中出現了THREE.CubeGeometry，THREE.CubeGeometry是什么東東，他是一個幾何體，幾何體由什么組成，已經不是本課的主要內容了，后面的課程我們會詳細的學到。不過這里你只需要知道CubeGeometry是一個正方體或者長方體，究竟是什么，由它的3個參數所決定，cubeGeometry的原型如下代碼所示：
CubeGeometry(width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides)
width：立方體x軸的長度
height：立方體y軸的長度
depth：立方體z軸的深度，也就是長度
想一想大家就明白，以上3個參數就能夠確定一個立方體。
剩下的幾個參數就要費解和復雜一些了，不過后面我們會自己來寫一個立方體，到時候，你會更明白這些參數的意義，這里你可以將這些參數省略。
5、渲染
終於到了最后一步，這一步做完后，就可以該干嘛干嘛去了。
渲染應該使用渲染器，結合相機和場景來得到結果畫面。實現這個功能的函數是
renderer.render(scene, camera);
渲染函數的原型如下：
render( scene, camera, renderTarget, forceClear )
各個參數的意義是：
scene：前面定義的場景
camera：前面定義的相機
renderTarget：渲染的目標，默認是渲染到前面定義的render變量中
forceClear：每次繪制之前都將畫布的內容給清除，即使自動清除標志autoClear為false，也會清除。
6、渲染循環
渲染有兩種方式：實時渲染和離線渲染 。
先看看離線渲染，想想《西游降魔篇》中最后的佛主，他肯定不是真的，是電腦渲染出來的，其畫面質量是很高的，它是事先渲染好一幀一幀的圖片，然后再把圖片拼接成電影的。這就是離線渲染。如果不事先處理好一幀一幀的圖片，那么電影播放得會很卡。CPU和GPU根本沒有能力在播放的時候渲染出這種高質量的圖片。
實時渲染：就是需要不停的對畫面進行渲染，即使畫面中什么也沒有改變，也需要重新渲染。下面就是一個渲染循環：
function render() { renderer.clear(); cube.rotation.x += 0.1; cube.rotation.y += 0.1; renderer.render(scene, camera); requestAnimationFrame(render); }
其中一個重要的函數是requestAnimationFrame，這個函數就是讓瀏覽器去執行一次參數中的函數，這樣通過上面render中調用requestAnimationFrame()函數，requestAnimationFrame()函數又讓rander()再執行一次，就形成了我們通常所說的游戲循環了。
7、場景，相機，渲染器之間的關系
Three.js中的場景是一個物體的容器，開發者可以將需要的角色放入場景中，例如蘋果，葡萄。同時，角色自身也管理着其在場景中的位置。
相機的作用就是面對場景，在場景中取一個合適的景，把它拍下來。
渲染器的作用就是將相機拍攝下來的圖片，放到瀏覽器中去顯示。他們三者的關系如下圖所示：
轉自：http://www.hewebgl.com/article/getarticle/50