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

「这是我参与2022首次更文挑战的第24天，活动详情查看：2022首次更文挑战」

示例代码采用three.js-r73版本: cdnjs.cloudflare.com/ajax/libs/t…

上一节我们绘制了一个矩形，如果我们想绘制一个三角形要怎么做呢？我们一起来看看吧。

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

• 我们想要绘制三角形，可以先查看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，没法代表几何体，所有我们要自己实现三角形的绘制

绘制彩色三角形

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

geometry = new THREE.Geometry(300, 300, 2, 3)
复制代码

2. 创建基础材质

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

3. 定义三种颜色

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

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

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

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

geometry.vertices.push(p1)
geometry.vertices.push(p2)
geometry.vertices.push(p3)
复制代码

6. 根据顶点创建面

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

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

复制代码

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

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

face.vertexColors[0] = color1
face.vertexColors[1] = color2
face.vertexColors[2] = color3
复制代码

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

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

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

codepen示例代码

总结

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

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