举荐：将 NSDT 场景编辑器退出你 3D 工具链
其余工具系列：NSDT 简石数字孪生顶点色彩数据插值计算上节课自定义几何体给大家介绍了一个顶点地位坐标概念，本节课给大家介绍一个新的几何体顶点概念，就是几何体顶点色彩。通常几何体顶点地位坐标数据和几何体顶点色彩数据都是一一对应的，比方顶点 1 有一个顶点地位坐标数据，也有一个顶点色彩数据，顶点 2 同样也有一个顶点地位坐标数据，也有一个顶点色彩数据 … 每个顶点设置一种色彩你能够在上节课代码更改为上面代码设置，你能够看到几何体的六个顶点别离渲染为几何体设置的顶点色彩数据。
var geometry = new THREE.BufferGeometry(); // 申明一个缓冲几何体对象
// 类型数组创立顶点地位 position 数据
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 属性的地位 position 属性
geometry.attributes.position = attribue;
// 类型数组创立顶点色彩 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
// 材质对象
var material = new THREE.PointsMaterial({
// 应用顶点色彩数据渲染模型，不须要再定义 color 属性
// color: 0xff0000,
vertexColors: THREE.VertexColors, // 以顶点色彩为准
size: 10.0 // 点对象像素尺寸
});
// 点渲染模式 点模型对象 Points
var points = new THREE.Points(geometry, material); // 点模型对象
scene.add(points); // 点对象增加到场景
材质属性.vertexColors 你能够看到下面案例的材质代码和后面稍有不同，原来是通过材质的色彩属性 color 设置模型色彩，而本案例并没有这样设置，而是设置了材质属性.vertexColors。var material = new THREE.PointsMaterial({
// 应用顶点色彩数据渲染模型，不须要再定义 color 属性
// color: 0xff0000,
vertexColors: THREE.VertexColors, // 以顶点色彩为准
size: 10.0 // 点对象像素尺寸
});
对于材质的属性.vertexColors 能够查看 Material 文档介绍，属性.vertexColors 的默认值是 THREE.NoColors，这也就是说模型的色彩渲染成果取决于材质属性.color，如果把材质属性.vertexColors 的值设置为 THREE.VertexColors,threejs 渲染模型的时候就会应用几何体的顶点色彩数据 geometry.attributes.color。属性缓冲区对象 BufferAttributeThreejs 提供的接口 BufferAttribute 目标是为了创立各种各样顶点数据，比方顶点色彩数据，顶点地位数据，而后作为几何体 BufferGeometry 的顶点地位坐标属性 BufferGeometry.attributes.position、顶点色彩属性 BufferGeometry.attributes.color 的值。缓冲类型几何体 BufferGeometry 除了顶点地位、顶点色彩属性之外还有其余顶点属性，前面课程都会解说到。对于 BufferGeometry 更多属性和办法能够查看文档 BufferGeometry。色彩插值如果你把几何体作为网格模型 Mesh 或者线模型 Line 构造函数的参数，你会发现渲染出突变的黑白成果。
之所以呈现突变是因为 Threejs 通过底层 WebGL 进行渲染的时候会对顶点的色彩数据进行插值计算。色彩插值计算简略点说，比方一条直线的端点 1 设置为红色，端点 2 设置为蓝色，整条直线就会呈现出从点 1 到红色点 2 的蓝色色彩突变，对于网格模型 Mesh 而言，就是三角形的三个顶点别离设置一个色彩，三角形外部的区域像素会依据三个顶点的色彩进行插值计算。插值计算示意图