three.js个人笔记四

立方体

THREE.BoxGeometry = function ( width, height, depth, widthSegments, heightSegments, depthSegments )

    width：表示立方体的宽度。
    height：表示立方体的高度。
    depth：表示立方体的长度或者说深度吧。
    widthSegments：宽度分段份数
    heightSegments：高度分段份数
    depthSegments：长度分段份数

geometry中有一个face成员，用来存储这个Geometry包含的面。每个面(face)有一个color属性，表示这个面的颜色。

var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors} );

vertexColors设置为THREE.FaceColors，就可以让几何体的每个顶点，使用geometry.faces[i].color中的颜色。通过“vertexColors: THREE.FaceColors”指定了一个面中4个顶点的颜色，在渲染的时候，面的颜色就取四个顶点的插值，因为四个顶点的颜色相同，所以面就是纯色的

网格

绘制网格是因为，我们需要一个参照物来反应几何体的旋转，不然很难看清几何体的旋转过程
function initGrid(){
// 网格的边长是1000，每个小网格的边长是50
var helper = new THREE.GridHelper( 1000, 50 );
helper.setColors( 0x0000ff, 0x808080 );
scene.add( helper );
}

1、var helper = new THREE.GridHelper( 1000, 50 )
这一行，生成了一个网格模型，边长为1000，大网格中有小网格，小网格的边长是50.
2、网格线的颜色一头是0x0000ff，另一头是0x808080。线段中间的颜色取这两个颜色的插值颜色

旋转

1.通过Mesh的rotation属性来旋转物体

要让立方体旋转起来，可以更改Mesh的rotation属性，rotation属性是一个欧拉类型THREE.Euler()，它的定义如下：

var rotation = new THREE.Euler();

如果我们要立方体围绕Y轴旋转，那么只需要在animation中调用如下的代码即可：

mesh.rotation.y +=0.01;

注意，这里的0.01表示的弧度。有的同学可能已经忘记了高中的弧度和角度转换的知识，没关系，我这里给出公式如下：

度＝弧度×180°/π

将上面的弧度变为0.01,计算的结果是0.57，也就是每个帧循环将旋转0.57度

2.通过rotateX，rotateY，rotateZ函数来旋转物体

function animation(){
mesh.rotateY(0.01);
renderer.render(scene, camera);
requestAnimationFrame(animation);
}

mesh.rotateY(0.01)表示围绕Y轴旋转0.01弧度