一、自定义几何体
你可以直接调用BoxGeometry直接创建一个立方体几何体，调用SphereGeometry创建一个球体几何体。不过为了大家更好的建立顶点概念，通过下面的代码自定义了一个几何体，通过网格模型可以渲染出来两个三角形效果。
通过Threejs引擎的BufferGeometry和BufferAttribute两个API自定义了一个具有六个顶点数据的几何体。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var geometry = new THREE.BufferGeometry(); //创建一个Buffer类型几何体对象
//类型数组创建顶点数据
var vertices = new Float32Array([
0, 0, 0, //顶点1坐标
50, 0, 0, //顶点2坐标
0, 100, 0, //顶点3坐标
0, 0, 10, //顶点4坐标
0, 0, 100, //顶点5坐标
50, 0, 10, //顶点6坐标
]);
// 创建属性缓冲区对象
var attribue = new THREE.BufferAttribute(vertices, 3); //3个为一组，表示一个顶点的xyz坐标
// 设置几何体attributes属性的位置属性
geometry.attributes.position = attribue;
1. 网格渲染
将上面6个顶点可以渲染为两个三角面。即使用网格渲染。
1
2
3
4
5
6
7
8
// 三角面(网格)渲染模式
var material = new THREE.MeshBasicMaterial({
color: 0x0000ff, //三角面颜色
// vertexColors: THREE.VertexColors, //以顶点颜色为准 (后面讲到)
side: THREE.DoubleSide //两面可见
}); //材质对象
var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
scene.add(mesh); //网格模型添加到场景中
2. 点模型
将上面6个顶点可以渲染为6个顶点，6个顶点为6个小方块，可设置大小。即使用点模型。
1
2
3
4
5
6
7
8
// 点渲染模式
var material = new THREE.PointsMaterial({
color: 0xff0000,
// vertexColors: THREE.VertexColors, //以顶点颜色为准
size: 10.0 //点对象像素尺寸
}); //材质对象
var points = new THREE.Points(geometry, material); //点模型对象
scene.add(points); //点对象添加到场景中
3. 线模型
将上面6个顶点渲染为从第一个点开始到最后一个点，依次连成线。
1
2
3
4
5
6
// 线条渲染模式
var material=new THREE.LineBasicMaterial({
color:0xff0000 //线条颜色
});//材质对象
var line=new THREE.Line(geometry,material);//线条模型对象
scene.add(line);//线条对象添加到场景中
立方体网格模型Mesh是由立方体几何体geometry和材质material两部分构成，立方体几何体BoxGeometry本质上就是一系列的顶点构成，只是Threejs的APIBoxGeometry把顶点的生成细节封装了，用户可以直接使用。比如一个立方体网格模型，有6个面，每个面至少两个三角形拼成一个矩形平面，每个三角形三个顶点构成，对于球体网格模型而言，同样是通过三角形拼出来一个球面，三角形数量越多，网格模型表面越接近于球形。
二、顶点颜色数据
通常几何体顶点位置坐标数据和几何体顶点颜色数据都是一一对应的。
1. 每个顶点设置一种颜色
1
2
3
4
5
6
7
8
9
10
11
12
13
//类型数组创建顶点颜色color数据
var colors = new Float32Array([
1, 0, 0, //顶点1颜色
0, 1, 0, //顶点2颜色
0, 0, 1, //顶点3颜色
1, 1, 0, //顶点4颜色
0, 1, 1, //顶点5颜色
1, 0, 1, //顶点6颜色
]);
// 设置几何体attributes属性的颜色color属性
geometry.attributes.color = new THREE.BufferAttribute(colors, 3);
//3个为一组,表示一个顶点的颜色数据RGB
2. 材质属性 .vertexColors
使用顶点颜色需要把material里的color替换掉：
1
2
3
4
5
6
// 三角面(网格)渲染模式
var material = new THREE.MeshBasicMaterial({
// color: 0x0000ff, //三角面颜色
vertexColors: THREE.VertexColors, //以顶点颜色为准
side: THREE.DoubleSide //两面可见
}); //材质对象
上面的效果：
属性.vertexColors的默认值是THREE.NoColors，这也就是说模型的颜色渲染效果取决于材质属性.color，如果把材质属性.vertexColors的值设置为THREE.VertexColors,threejs渲染模型的时候就会使用几何体的顶点颜色数据geometry.attributes.color。
3. 颜色插值
如上图效果，出现渐变是因为Threejs通过底层WebGL进行渲染的时候会对顶点的颜色数据进行插值计算。颜色插值计算简单点说，比如一条直线的端点1设置为红色，端点2设置为蓝色，整条直线就会呈现出从点1到红色点2的蓝色颜色渐变，对于网格模型Mesh而言，就是三角形的三个顶点分别设置一个颜色，三角形内部的区域像素会根据三个顶点的颜色进行插值计算。
参考链接：http://www.webgl3d.cn/Three.js/