three.js 學習之旅（一）

THREE.js學習

重要的3樣東西：場景(Scene)、相機(Camera)、渲染(Renderer)

一、首先新建一個場景(Scene)(ps:這裏的場景相似flash的舞臺)
二、而後新建一個相機(Camera),three.js裏有不少不一樣的相機。官方示例裏用的是--透視投影相機(PerspectiveCamera)。

1 PerspectiveCamera(fov, aspect, near, far)

PerspectiveCamera構造函數接受4個參數。
-- fov 可視角度
-- aspect 寬高比(width/height)，一般設置爲canvas元素的寬高比
-- near 近端距離
-- far 遠端距離
只有離相機的距離大於near值，小於far值，且在相機的可視角度以內，才能被相機投影到。

三、場景跟相機都生成之後，還須要擺放在場景裏的物體。

用BoxGeometry生成一個立方體。

1 BoxGemetry(width, height, dept, widthSegments, heightSegments, depthSegments)

-- width,height,dept分別是長寬高
-- widthSegments, heightSegments, deptSegments是對應長寬高的分段，在使用線模式({wireframe:true})進行渲染的時候，能夠看到效果。

用MeshBasicMaterial生成材質。

1 MeshBasicMaterial({color:"0xffffff", wireframe:true})

-- color 材質顏色
-- wireframe 是否將材質渲染成線框

生成網格對象Mesh。
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
建立一個網格須要一個幾何體，以及一個或多個材質。當網格建立好以後，咱們就能夠將它添加到場景中並進行渲染。
網格對象提供了幾個屬性和方法用於改變它在場景中的位置和顯示效果。
-- position 決定該對象相對其父對象的位置。多數狀況下，一個對象的父對象是THREE.Scene()對象。
-- rotation 設置對象繞任何一個軸的旋轉弧度。
-- scale 沿x、y、z軸縮放對象。
-- translateX()、translateY()、translateZ() 沿x、y、z軸平移。
-- visible 是否渲染到場景中

四、將物體添加到場景中。
scene.add(cube);
此時物體和相機相互挨的很近(ps:多是物體和相機都在場景中間，咱們看到的就是相機裏呈現的景象，因此目前看上去物體很大，超出邊界)

五、挪動相機位置。

1 camera.position.set(x,y,z);

或

1 cube.position.x = x;
2 cube.position.y = y;
3 cube.position.z = z;

六、經過requestAnimationFrame讓物體動起來

1 function animate() {
2     requestAnimationFrame( animate );
3     cube.rotation.x += 0.01;
4     cube.rotation.y += 0.01;
5 }
6 animate();

一個簡單的立方體旋轉動畫完成。