第一個框架的效果是顯示一個綠色的正方體
<!DOCTYPE html> <html> <head> <title></title> <style>canvas { width: 100%; height: 100% }</style> <script src="libs/three.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);//domElement元素，表示渲染器中的畫布，所有的渲染都是畫在domElement上的 var geometry = new THREE.CubeGeometry(1,1,1);//THREE.CubeGeometry是一個幾何體，有3個參數：width：立方體x軸的長度，height：立方體y軸的長度，depth：立方體z軸的深度 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>
這個旋轉的立方體算我們踏入WebGL這個神奇的世界的開始。借助於three.js，我們並沒有寫太多的代碼就完成了這個示例。現在，我們來分析它。
在Three.js中，要渲染物體到網頁中，我們需要3個組建：場景（scene）、相機（camera）和渲染器（renderer）。有了這三樣東西，才能將物體渲染到網頁中去。
1.場景
在Threejs中場景就只有一種，用THREE.Scene來表示，要構件一個場景也很簡單，只要new一個對象就可以了，代碼如下：
var scene = new THREE.Scene();
場景是所有物體的容器，如果要顯示一個蘋果，就需要將蘋果對象加入場景中。
2.相機
相機決定了場景中那個角度的景色會顯示出來。相機就像人的眼睛一樣，人站在不同位置，抬頭或者低頭都能夠看到不同的景色。
場景只有一種，但是相機卻又很多種。和現實中一樣，不同的相機確定了呈相的各個方面。比如有的相機適合人像，有的相機適合風景，專業的攝影師根據實際用途不一樣，選擇不同的相機。
對程序員來說，只要設置不同的相機參數，就能夠讓相機產生不一樣的效果。
3.渲染器
設置渲染器，渲染器決定了渲染的結果應該畫在頁面的什么元素上面，並且以怎樣的方式來繪制。
注意，渲染器renderer的domElement元素，表示渲染器中的畫布，所有的渲染都是畫在domElement上的，所以這里的appendChild表示將這個domElement掛接在body下面，這樣渲染的結果就能夠在頁面中顯示了。
4.添加物體到場景中
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根本沒有能力在播放的時候渲染出這種高質量的圖片。
實時渲染：就是需要不停的對畫面進行渲染，即使畫面中什么也沒有改變，也需要重新渲染。下面就是一個渲染循環：