所有的三位物體都是由點構成，兩點構成線，三點構成面，ThreeJs又如何繪制出點、線、面呢 ？

在ThreeJs中：

模型由幾何體和材質構成

模型以何種形式(點、線、面)展示取決于渲染方式

1. 幾何體

首先我們來創(chuàng)建一個自定義的幾何體

var geometry = new THREE.Geometry(); //聲明一個幾何體對象Geometry

THREE.Geometry是所有幾何體的基類，它有幾個重要的屬性：

vertices : 數(shù)組，保存該幾何體下所有頂點(Vector3對象)

colors : 數(shù)組，保存該幾何體下所有頂點的顏色信息(Color對象)

faces : 數(shù)組，保存該幾何體下所有面信息(Face3對象)

此時該幾何體為空，我們需要創(chuàng)建一些點，然后綁定到該幾何體

var p1 = new THREE.Vector3( 0, 0, 0);var p2 = new THREE.Vector3( 50, 0, 50);var p3 = new THREE.Vector3( 50, 50, 50);var p4 = new THREE.Vector3( 0, 50, 0);//綁定頂點到幾何體

geometry.vertices.push(p1, p2, p3, p4);//如果需要每個點展示不同顏色，需要給每個頂點添加顏色，也可以通過材質設置統(tǒng)一顏色

geometry.colors =[new THREE.Color( 0xFF0000),new THREE.Color( 0x00FF00),new THREE.Color( 0x0000FF),new THREE.Color( 0xFFFF00)

];

這里創(chuàng)建了一個幾何體，接下來我們把他以點的形式渲染到頁面上

//如果以點的形式渲染，需要設置點對應材質

var pointMaterial = newTHREE.PointsMaterial({

color:0xFFFFFF, //設置顏色，默認 0xFFFFFF

vertexColors: true, //定義材料是否使用頂點顏色，默認false ---如果該選項設置為true，則color屬性失效

size: 5 //定義粒子的大小。默認為1.0

});//生成點模型

var points = newTHREE.Points(geometry, pointMaterial);//將模型添加到場景

scene.add(points);

接下來我們創(chuàng)建一個線模型

//如果以線的形式渲染，需要設置線材質

var lineMaterial = newTHREE.LineBasicMaterial({

color:0xFFFFFF, //設置顏色，默認 0xFFFFFF

vertexColors: true, //設置為true線條會以兩點顏色漸變 ---如果該選項設置為true，則color屬性失效

linewidth: 5, //線寬，window下不生效

});var line = newTHREE.Line(geometry, lineMaterial);

scene.add(line);

再來創(chuàng)建一個網格(面)模型

//創(chuàng)建一個面，參數(shù)為幾何體頂點的索引

var face1 = new THREE.Face3( 0, 1, 2);//設置這個面的法向量

face1.normal = new THREE.Vector3( 0, 0, -1);//設置各個頂點對應顏色

face1.vertexColors =[new THREE.Color(0xFF0000),new THREE.Color(0x00FF00),new THREE.Color(0x0000FF),

];

geometry.faces.push(face1);//設置網格材質，這里設置為Lambert材質為一種不發(fā)光材質

var meshMaterial = newTHREE.MeshLambertMaterial({

vertexColors : THREE.VertexColors,

side: THREE.DoubleSide

});var mesh = newTHREE.Mesh(geometry, meshMaterial);

scene.add(mesh);

可以看出以網格形式渲染需要先創(chuàng)建Face3對象，這是因為我們幾何體的每個面都有其對應的法向量，即設置以哪個角度反射光線

Face3對象對應的屬性

a，b，c ： 對應三角面的三個點(Vector3對象)

color ：顏色

normal ：該三角面的法向量(Vector3對象)

vertexColors ： 設置三角面三個點對應的法向量(Vector3對象數(shù)組)，通常一個面都有一個統(tǒng)一的法向量，即設置 normal 即可

以上是我們創(chuàng)建自定義模型的基本操作，ThreeJs為我們提供了很多自帶的模型，我們只需要調用API即可創(chuàng)建

等等....