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();

一个简单的立方体旋转动画完成。