three.js 学习之旅（一）

THREE.js学习

重要的3样东西：场景(Scene)、相机(Camera)、渲染(Renderer)

1、首先新建一个场景(Scene)(ps:这里的场景类似flash的舞台)
2、然后新建一个相机(Camera),three.js里有很多不同的相机。官方示例里用的是--透视投影相机(PerspectiveCamera)。

PerspectiveCamera(fov, aspect, near, far)

PerspectiveCamera构造函数接受4个参数。
-- fov 可视角度
-- aspect 宽高比(width/height)，通常设置为canvas元素的宽高比
-- near 近端距离
-- far 远端距离
只有离相机的距离大于near值，小于far值，且在相机的可视角度之内，才能被相机投影到。

3、场景跟相机都生成以后，还需要摆放在场景里的物体。

用BoxGeometry生成一个立方体。

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

-- width,height,dept分别是长宽高
-- widthSegments, heightSegments, deptSegments是对应长宽高的分段，在使用线模式({wireframe:true})进行渲染的时候，可以看到效果。

用MeshBasicMaterial生成材质。

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 是否渲染到场景中

4、将物体添加到场景中。
scene.add(cube);
此时物体和相机相互挨的很近(ps:可能是物体和相机都在场景中间，我们看到的就是相机里呈现的景象，所以目前看上去物体很大，超出边界)

5、挪动相机位置。

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

或

cube.position.x = x;
cube.position.y = y;
cube.position.z = z;

6、通过requestAnimationFrame让物体动起来

function animate() {
    requestAnimationFrame( animate );
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
}
animate();

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