webGL官網：http://www.hewebgl.com/#
什么是threejs，很簡單，你將它理解成three + js就可以了。three表示3D的意思，js表示javascript的意思。那么合起來，three.js就是使用javascript 來寫3D程序的意思。
Javascript是運行在網頁端的腳本語言，那么毫無疑問Three.js也是運行在瀏覽器上的。
開啟Three.js 把物體渲染到網頁中，我們需要3個組建
稱為：三大組建 、場景（scene）、相機（camera）和渲染器（renderer）
有了這三個東西，我們才可以使用相機把場景渲染到網頁上去。（注意）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <style>canvas { width: 100%; height: 100% }</style> 6 <script src="js/three.js"></script> 7 </head> 8 <body> 9 <script> 10 var scene = new THREE.Scene();// 場景 11 12 var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);// 透視相機 13 14 var renderer = new THREE.WebGLRenderer();// 渲染器 15 16 renderer.setSize(window.innerWidth, window.innerHeight);// 設置渲染器的大小為窗口的內寬度，也就是內容區的寬度 17 18 document.body.appendChild(renderer.domElement); 19 var geometry = new THREE.CubeGeometry(1,1,1); 20 var material = new THREE.MeshBasicMaterial({color: 0x00ff00}); 21 var cube = new THREE.Mesh(geometry, material); scene.add(cube); 22 camera.position.z = 5; 23 function render() { 24 requestAnimationFrame(render); 25 cube.rotation.x += 0.1; 26 cube.rotation.y += 0.1; 27 renderer.render(scene, camera); 28 } 29 render(); 30 </script> 31 </body> 32 </html>
場景、在Threejs中場景就只有一種，用THREE.Scene來表示，要構件一個場景也很簡單，只要new一個對象就可以了，代碼如下：
var scene = new THREE.Scene();
場景是所有物體的容器，如果要顯示一個蘋果，就需要將蘋果對象加入場景中。
相機、
另一個組建是相機，相機決定了場景中那個角度的景色會顯示出來。相機就像人的眼睛一樣，人站在不同位置，抬頭或者低頭都能夠看到不同的景色。
場景只有一種，但是相機卻又很多種。和現實中一樣，不同的相機確定了呈相的各個方面。比如有的相機適合人像，有的相機適合風景，專業的攝影師根據實際用途不一樣，選擇不同的相機。對程序員來說，只要設置不同的相機參數，就能夠讓相機產生不一樣的效果。
在Threejs中有多種相機，這里介紹兩種，它們是：
透視相機（THREE.PerspectiveCamera）、這里我們使用一個透視相機，透視相機的參數很多，這里先不詳細講解。后面關於相機的那一章，我們會花大力氣來講。定義一個相機的代碼如下所示：
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
3、渲染器 最后一步就是設置渲染器，渲染器決定了渲染的結果應該畫在頁面的什么元素上面，並且以怎樣的方式來繪制。這里我們定義了一個WebRenderer渲染器，代碼如下所示：
var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);
注意，渲染器renderer的domElement元素，表示渲染器中的畫布，所有的渲染都是畫在domElement上的，所以這里的appendChild表示將這個domElement掛接在body下面，這樣渲染的結果就能夠在頁面中顯示了。
4、那現在，我們將一個物體添加到場景中：
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
代碼中出現了THREE.CubeGeometry，THREE.CubeGeometry是什么東東，他是一個幾何體，幾何體由什么組成，已經不是本課的主要內容了，后面的課程我們會詳細的學到。不過這里你只需要知道CubeGeometry是一個正方體或者長方體，究竟是什么，由它的3個參數所決定，cubeGeometry的原型如下代碼所示：
1 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根本沒有能力在播放的時候渲染出這種高質量的圖片。
實時渲染：就是需要不停的對畫面進行渲染，即使畫面中什么也沒有改變，也需要重新渲染。下面就是一個渲染循環：
1 function render() { 2 cube.rotation.x += 0.1; 3 cube.rotation.y += 0.1; 4 renderer.render(scene, camera); 5 requestAnimationFrame(render); 6 }
其中一個重要的函數是requestAnimationFrame，這個函數就是讓瀏覽器去執行一次參數中的函數，這樣通過上面render中調用requestAnimationFrame()函數，requestAnimationFrame()函數又讓rander()再執行一次，就形成了我們通常所說的游戲循環了。
場景，相機，渲染器之間的關系
Three.js中的場景是一個物體的容器，開發者可以將需要的角色放入場景中，例如蘋果，葡萄。同時，角色自身也管理着其在場景中的位置。
相機的作用就是面對場景，在場景中取一個合適的景，把它拍下來。
渲染器的作用就是將相機拍攝下來的圖片，放到瀏覽器中去顯示。他們三者的關系如下圖所示：
第一個框架是將所有代碼在一段腳本中完成，當邏輯復雜一點后，就比較難讀懂。所以，我們將其按照功能分解成函數，代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Three框架</title> 6 <script src="js/Three.js" data-ke-src="js/Three.js"></script> 7 <style type="text/css"> 8 div#canvas-frame { 9 border: none; 10 cursor: pointer; 11 width: 100%; 12 height: 600px; 13 background-color: #EEEEEE; 14 } 15 16 </style> 17 <script> 18 var renderer; 19 function initThree() { 20 width = document.getElementById('canvas-frame').clientWidth; 21 height = document.getElementById('canvas-frame').clientHeight; 22 renderer = new THREE.WebGLRenderer({ 23 antialias : true 24 }); 25 renderer.setSize(width, height); 26 document.getElementById('canvas-frame').appendChild(renderer.domElement); 27 renderer.setClearColor(0xFFFFFF, 1.0); 28 } 29 30 var camera; 31 function initCamera() { 32 camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000); 33 camera.position.x = 0; 34 camera.position.y = 1000; 35 camera.position.z = 0; 36 camera.up.x = 0; 37 camera.up.y = 0; 38 camera.up.z = 1; 39 camera.lookAt({ 40 x : 0, 41 y : 0, 42 z : 0 43 }); 44 } 45 46 var scene; 47 function initScene() { 48 scene = new THREE.Scene(); 49 } 50 51 var light; 52 function initLight() { 53 light = new THREE.DirectionalLight(0xFF0000, 1.0, 0); 54 light.position.set(100, 100, 200); 55 scene.add(light); 56 } 57 58 var cube; 59 function initObject() { 60 61 var geometry = new THREE.Geometry(); 62 var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors} ); 63 var color1 = new THREE.Color( 0x444444 ), color2 = new THREE.Color( 0xFF0000 ); 64 65 // 線的材質可以由2點的顏色決定 66 var p1 = new THREE.Vector3( -100, 0, 100 ); 67 var p2 = new THREE.Vector3( 100, 0, -100 ); 68 geometry.vertices.push(p1); 69 geometry.vertices.push(p2); 70 geometry.colors.push( color1, color2 ); 71 72 var line = new THREE.Line( geometry, material, THREE.LinePieces ); 73 scene.add(line); 74 } 75 function render() 76 { 77 renderer.clear(); 78 renderer.render(scene, camera); 79 requestAnimationFrame(render); 80 } 81 function threeStart() { 82 initThree(); 83 initCamera(); 84 initScene(); 85 initLight(); 86 initObject(); 87 render(); 88 } 89 90 </script> 91 </head> 92 93 <body onload="threeStart();"> 94 <div id="canvas-frame"></div> 95 </body> 96 </html>
大概了解一下就可以了，它只是將框架一的代碼，放到了不同的函數中，最終通過threeStart()函數調用而已。