为什么要自定义绘制三角形

我们想要绘制三角形，可以先查看threejs源码
我们找到一个三角形相关的定义

// File:src/math/Triangle.js

/**
 * @author bhouston / http://clara.io
 * @author mrdoob / http://mrdoob.com/
 */

THREE.Triangle = function ( a, b, c ) {

	this.a = ( a !== undefined ) ? a : new THREE.Vector3();
	this.b = ( b !== undefined ) ? b : new THREE.Vector3();
	this.c = ( c !== undefined ) ? c : new THREE.Vector3();

};

这里定义的三角形是三个向量组成的数据结构，不是一个geometry，没法代表几何体，所有我们要自己实现三角形的绘制

绘制彩色三角形

我们先创建基础的Geometry,用来描绘我们的三角形

geometry = new THREE.Geometry(300, 300, 2, 3)

创建基础材质

// 材质颜色取顶点的颜色
let material = new THREE.MeshBasicMaterial({
    vertexColors: THREE.VertexColors,
    wireframe: false, // 将几何体渲染为线框
})

定义三种颜色

// 定义三种颜色
var color1 = new THREE.Color(0xff0000)  // 红色
var color2 = new THREE.Color(0x00ff00) // 绿色
var color3 = new THREE.Color(0x0000ff) // 蓝色

定义三个顶点，三个顶点要在一个面上

// 定义三个顶点
var p1 = new THREE.Vector3(100, 0, 0)
var p2 = new THREE.Vector3(0, 100, 0)
var p3 = new THREE.Vector3(-100, 0, 0)

把顶点添加到几何向量数组中

geometry.vertices.push(p1)
geometry.vertices.push(p2)
geometry.vertices.push(p3)

根据顶点创建面

我们添加的顶点画在图上(没有画z轴),按照顶点添加的顺序我们的索引顺序应该是（0,1,2）

// 利用顶点索引 0, 1, 2 创建一个面
var face = new THREE.Face3(0, 1, 2)

THREE.Face3可以创建三角面，在geometry中进行使用
为什么使用顶点索引创建面?
- 因为一个整形占4字节，一个顶点占12字节,3个顶点是36字节，一个面占12字节
- 使用索引可以节省空间24个字节，如果多个顶点重复使用，节省的更多，提高空间利用率

给面中的每个顶点添加颜色

face.vertexColors[0] = color1
face.vertexColors[1] = color2
face.vertexColors[2] = color3

把面添加到geometry中,然后创建网格模型添加到场景中

// 将面添加到geometry中
geometry.faces.push(face)
let object = new THREE.Mesh(geometry, material)
scene.add(object)

最终展示效果：这样我们的彩色三角形就做好啦。

codepen示例代码

总结

这一节我们主要讲了以下内容：

为什么要自定义绘制三角形
绘制彩色三角形过程
1. 创建Geometry
2. 创建基础材质
3. 定义三种颜色
4. 定义三个顶点
5. 把顶点添加到Geometry向量数组中
6. 根据顶点创建面
7. 给面中美个顶点添加颜色
8. 把面添加到Geometry中
9. 创建网格
10. 添加到场景中

ThreeJs入门20-geometry,自定义绘制一个彩色三角形

为什么要自定义绘制三角形

绘制彩色三角形

总结