three.js-WebGL初體驗

 

 

一、四大組建

在Three.js中，要渲染物體到網頁中，我們需要4個組建：場景（scene）、相機（camera）、渲染器（renderer）、幾何體（geometry）。有了這三樣東西，才能將物體渲染到網頁中去。

創建這三要素的代碼如下：

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 camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
//(fov, aspect, near, far) 
fov：視角，可以理解爲眼睛睜開的角度
aspect：縱橫比，實際窗口的縱橫比，即寬度除以高度
near：近平面，相機到近處裁面的距離
far：遠平面，相機到遠處裁面的距離

（2）渲染器

渲染器決定了渲染的結果應該畫在頁面的什麼元素上面，並且以怎樣的方式來繪製，定義代碼如下：

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

requestAnimationFrame（render）

cube.rotation.x/y/z +=value;

旋轉效果

stats.js庫，顯示fps，內存使用情況；tween.js改變相機或者物體位置的工具類

二、相機詳解

（1）正投影相機

THREE.OrthographicCamera = function( left, right, top, bottom, near, far )

1、 left參數

left：左平面距離相機中心點的垂直距離。從圖中可以看出，左平面是屏幕裏面的那個平面。

2、 right參數

right：右平面距離相機中心點的垂直距離。從圖中可以看出，右平面是屏幕稍微外面一點的那個平面。

3、 top參數

top：頂平面距離相機中心點的垂直距離。上圖中的頂平面，是長方體頭朝天的平面。

4、 bottom參數

bottom：底平面距離相機中心點的垂直距離。底平面是頭朝地的平面。

5、near參數

near：近平面距離相機中心點的垂直距離。近平面是左邊豎着的那個平面。

6、far參數

far：遠平面距離相機中心點的垂直距離。遠平面是右邊豎着的那個平面。

var camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );

scene.add( camera );


這個例子將瀏覽器窗口的寬度和高度作爲了視景體的高度和寬度，
相機正好在窗口的中心點上。這也是我們一般的設置方法，基本上爲了方便，我們不會設置其他的值。

（2）透視相機

THREE.PerspectiveCamera = function( fov, aspect, near, far )

1、視角fov：眼睛睜開的角度,即,視角的大小,如果設置爲0,相當你閉上眼睛了,所以什麼也看不到,如果爲180,那麼可以認爲你的視界很廣闊,但是在180度的時候，往往物體很小，因爲他在你的整個可視區域中的比例變小了。

2、近平面near：這個呢，表示你近處的裁面的距離。

3、遠平面far：這個呢，表示你遠處的裁面,

4、縱橫比aspect：實際窗口的縱橫比，即寬度除以高度。

var camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );

scene.add( camera );

確定相機的唯一位置：position（x, y, z）相機位置、up（x, y, z）快門位置、lookAt(x, y, z)視點位置，代表的是一個方向，而不是一個點

三、光

THREE.Light只是其他所有光源的基類

注意區分設置位置的方法的區別

Var redLight = new THREE.Light(0xFF0000); //創建一個紅光

//設置光的位置
light.position.set(0,0,1); 

//設置mesh的位置
var mesh = new THREE.Mesh( geometry,material);
mesh.position.set(0,0,0); 

//設置照相機的位置
camera.position.x = 600;
camera.position.y = 0;
camera.position.z = 600;