开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第28天，点击查看活动详情

前言

上一节中我们通过类型化数组与BufferGeoment表示顶点的位置，渲染出了顶点。其中位置表示是通过3个元素为一组表示的，按照这个思路我们还能组合表示颜色。

颜色

颜色可以用RGB表示，而RGB刚好对应三个参数，契合三个元素一组，所以我们可以用类型化数组表示颜色，再设置成材质的颜色属性就能表示顶点颜色。在此之前我们需要稍微了解下Three中的Color:

   Three.Color(r,g,b)

这三个都是可选参数，我们可以猜出r、g、b分别表示红、绿、蓝的占比，如果g、b参数存在那么r就是表示红完全没问题。但我们可以只设置r，这时候它可以是16进制的color值或者样式。

   //十六进制
   Three.Color(f0f0f0)
   //string样式
   Three.Color('red')
   //r g b表示
   Three.Color(1,1,1)

r、g、b范围都是0-1，它们表示是颜色占比，这跟rgb不同。在类型化数组中三个元素可以表示r、g、b，组合一组就是材质所需颜色参数。

const vertices = new Float32Array([
  -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0
]);
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
//描述颜色
const colors = new Float32Array([
  1, 0, 0, 0, 1, 0, 0, 0, 1
]);
geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
const material = new THREE.PointsMaterial({
  vertexColors: true
});
const mesh = new THREE.Points(geometry, material);

成功将顶点渲染成设置好的颜色，下面我们再看下网格模型:

   const material = new THREE.MeshBasicMaterial({
     vertexColors: true 
    });
    const mesh = new THREE.Mesh(geometry, material);

QQ图片20230302225717.png

我们会发现此时渲染出来的模型颜色自动变成渐变色了，之所以这样是因为WebGL在渲染的时候会进行插值计算，当两个顶点颜色不一致时，会从一个顶点颜色过渡到另一个顶点的颜色。我们设置了三个顶点各自影响就变成了图中的样式。

总结

以上就是顶点颜色的表示思路，跟位置本质是一样的，都具有三个元素表示出属性值的特性，写颜色数组时要注意范围0-1.

three学习（七）——颜色

前言

颜色

总结