我們在學些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);