[Three.js] 概述與第一個範例

標籤: Three.js javascript

先用第一個簡單的範例讓大家看一下 Three.js 的效果,首先要記得把 library 讀進來,我這邊使用的是這一隻:

https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js

也可以到官網下載目前最新的版本到自己的電腦裡再讀入。

接著照官方範例來看,我們先

1. 建立一個場景:

var scene = new THREE.Scene();

 

2. 建立相機

var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

關於相機的參數可以先看一下官方文件 THREE.PerspectiveCamera 的說明,官方使用的是透視投影相機(PerspectiveCamera)。

裡面的一些參數設定與說明如下:

  • 視角(fov, field of view):又稱為視野、視場,指的是我們能從畫面上看到的視野範圍,一般在遊戲中會設定在 60 ~ 90 度。
  • 畫面寬高比(aspect):渲染結果的畫面比例,一般都是使用 window.innerWidth / window.innerHeight 。
  • 近面距離(near):從距離相機多近的地方開始渲染,一般推薦使用 0.1。
  • 遠面距離(far):相機能看得多遠,一般推薦使用 1000,可視需求調整,設置過大會影響效能。

 

3. 建立渲染器:

//選擇渲染器
var renderer = new THREE.WebGLRenderer();
//設定尺寸
renderer.setSize( window.innerWidth, window.innerHeight );
//把渲染器加到網頁上
document.body.appendChild( renderer.domElement );

 

4. 建立物件

//設定物體
var geometry = new THREE.BoxGeometry();
//設定材質
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
//加到場景
scene.add( cube );

camera.position.z = 5;

這裡利用 THREE.BoxGeometry 來建立立方體,一般建立物體的就是先宣告形狀(geometry)與材質(material),然後用這兩個要素建立一個網格物件(mesh),再設定位置後加到場景中便可完成。

 

5. 增加動畫

function animate() {
	requestAnimationFrame( animate );
	renderer.render( scene, camera );
}
animate();

若是要讓場景中的物體動起來,就需要每隔一段時間重新渲染場景,而這就是程式裡面 requestAnimationFrame 所負責的部分。

requestAnimationFrame 是 HTML5 中瀏覽器提供的一個為動畫而生的接口,它能讓畫面盡可能平滑與高效地進行重新渲染,還能有效節省 CPU、GPU 資源,所以一般在 Three.js 會透過它來幫忙重新渲染場景。

這邊是讓 cube 不停的旋轉:

cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

利用不停呼叫 animate 並執行 requestAnimationFrame,就可以讓場景不停地渲染並變成動畫了。

 

完整的程式碼:

 

官方的第一個範例是建立一個立方體,並讓他在場景中不停的旋轉,這個範例沒有用到光源,所以會看到的是一個單色的立方體在空間中不斷旋轉,之後打上光後看起來就會比較自然了。

 

參考:

Three.js Create a scene

用 Three.js 來當個創世神 (03):Hello Three.js!