Three.js 使用顶点、面绘制模型

我们在学些WebGL基础的时候每天都是在一直研究顶点位置，法向量，绘制下标什么的。虽然复杂，但是毕竟原生，性能没得说。

three.js也给我们提供了相关的接口供我们使用原生的方法绘制模型

首先，我创建了一个空白的形状：

//立方体
var cubeGeometry = new THREE.Geometry();

然后添加了立方体的顶点，一共8个

//创建立方体的顶点
 var vertices = [
    new THREE.Vector3(10, 10, 10), //v0
    new THREE.Vector3(-10, 10, 10), //v1
    new THREE.Vector3(-10, -10, 10), //v2
    new THREE.Vector3(10, -10, 10), //v3
    new THREE.Vector3(10, -10, -10), //v4
    new THREE.Vector3(10, 10, -10), //v5
    new THREE.Vector3(-10, 10, -10), //v6
    new THREE.Vector3(-10, -10, -10) //v7
];

 cubeGeometry.vertices = vertices;

//创建立方的面
var faces=[
            new THREE.Face3(0,1,2),
            new THREE.Face3(0,2,3),
            new THREE.Face3(0,3,4),
            new THREE.Face3(0,4,5),
            new THREE.Face3(1,6,7),
            new THREE.Face3(1,7,2),
            new THREE.Face3(6,5,4),
            new THREE.Face3(6,4,7),
            new THREE.Face3(5,6,1),
            new THREE.Face3(5,1,0),
            new THREE.Face3(3,2,7),
            new THREE.Face3(3,7,4)
];

 cubeGeometry.faces = faces;

（1）面是由三个顶点组成的一个三角形面，也是WebGL的实现面的方式。如果需要一个长方形，那就需要由两个三角形组合而成。 
（2）如果要绘制的面是朝向相机的，那这个面的顶点的书写方式是逆时针绘制的，比如图上模型的第一个面的添加里面书写的是(0,1,2)。 
（3）如果能使模型有灯光的效果，还需要设置法向量，让three.js自动生成即可，如下

//生成法向量
cubeGeometry.computeFaceNormals();

var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x00ffff});

cube = new THREE.Mesh(cubeGeometry, cubeMaterial);