three.js初涉略（一）

<!--

最近要研究一下webgl，發現了webgl中文網（http://www.hewebgl.com/article/articledir/1）。邊研究教程邊作下記錄

-->

three.js是WebGL開源框架，它能寫出在瀏覽器上流暢運行的3D程序。

代碼地址：https://github.com/mrdoob/three.js。

支持Webgl的瀏覽器不少，例如Chrome、FireFox、360安 全瀏覽器6.0等，而IE瀏覽器對Webgl標準的支持就不太好。

第一個框架

三大組建

在Three.js中，要渲染物體到網頁中，咱們須要3個組建：場景（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);

　　渲染器renderer的domElement元素，表示渲染器中的畫布，全部的渲染都是畫在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);

　　THREE.CubeGeometry是一個立方體，cubeGeometry的原型以下代碼所示：

CubeGeometry(width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides)

　　

渲染

渲染應該使用渲染器，結合相機和場景來獲得結果畫面。

function render() {
    requestAnimationFrame(render);
    cube.rotation.x += 0.1;
    cube.rotation.y += 0.1;
    renderer.render(scene, camera);
}
render();

　　

渲染函數的原型以下：

render( scene, camera, renderTarget, forceClear )

 

renderTarget：渲染的目標，默認是渲染到前面定義的render變量中

forceClear：每次繪製以前都將畫布的內容給清除，即便自動清除標誌autoClear爲false，也會清除。

 

渲染有兩種方式：實時渲染和離線渲染 。

事先渲染好一幀一幀的圖片，而後再把圖片拼接成電影的。這就是離線渲染。

實時渲染：就是須要不停的對畫面進行渲染，即便畫面中什麼也沒有改變，也須要從新渲染。

其中一個重要的函數是requestAnimationFrame，這個函數就是讓瀏覽器去執行一次參數中的函數，這樣經過上面render中調用requestAnimationFrame()函數，requestAnimationFrame()函數又讓render()再執行一次，就造成了咱們一般所說的遊戲循環了。