什么是WebGL
WebGL是在瀏覽器中實現三維效果的一套規范。
WebGL能做什么
游戲、家居、虛擬現實、城市地圖、CAD制圖等等
什么是Three.js
three.js就是使用javascript 來寫的，運行在瀏覽器上的3D程序。three.js是一個封裝好的WebGL庫，相當於簡化了WebGL的操作。
第一個例子
<!DOCTYPE html> <html> <head> <title></title> <style>canvas { width: 100%; height: 100% }</style> </head> <body> <script src="js/three.min.js"></script> </body> </html>
在瀏覽器運行，Console下輸入 THREE.REVISION命令，得到版本號
第一個框架
<!DOCTYPE html> <html> <head> <title></title> <style>canvas { width: 100%; height: 100% }</style> <script src="js/three.min.js"></script> </head> <body> <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.CubeGeometry(1,1,1); var material = new THREE.MeshBasicMaterial({color: 0x00ff00}); var cube = new THREE.Mesh(geometry, material); scene.add(cube); camera.position.z = 5; function render() { requestAnimationFrame(render); cube.rotation.x += 0.1; cube.rotation.y += 0.1; renderer.render(scene, camera); } render(); </script> </body> </html>
四大組件
場景（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);
1、場景
場景是所有物體的容器，如果要顯示一個蘋果，就需要將蘋果對象加入場景中。
var scene = new THREE.Scene();
2、相機
相機決定了場景中那個角度的景色會顯示出來。相機就像人的眼睛一樣，人站在不同位置，抬頭或者低頭都能夠看到不同的景色。
透視相機（THREE.PerspectiveCamera）：離視點近的物體大，離視點遠的物體小。
正投影相機：遠近都一樣大小。
3、渲染器
渲染器決定了渲染的結果應該畫在頁面的什么元素上面，並且以怎樣的方式來繪制。
4、幾何體
幾何體就是要顯示在場景中的對象。THREE.CubeGeometry
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);
WebGL精彩案例：http://www.hewebgl.com/article/getarticle/102