举荐：将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而言，就是三角形的三个顶点别离设置一个色彩，三角形外部的区域像素会依据三个顶点的色彩进行插值计算。插值计算示意图