如何为缓冲区几何图形中的每个顶点指定不同的颜色？Three.js

var colors = []; // 存储顶点颜色的数组

// 为每个顶点指定颜色
for (var i = 0; i < geometry.vertices.length; i++) {
    var color = new THREE.Color(); // 创建一个颜色对象
    color.setRGB(Math.random(), Math.random(), Math.random()); // 随机生成颜色值
    colors.push(color.r, color.g, color.b); // 将颜色值添加到数组中
}

// 创建一个缓冲区属性对象
var colorAttribute = new THREE.Float32BufferAttribute(colors, 3); // 每个顶点的颜色由3个浮点数表示

// 将缓冲区属性对象添加到几何图形中
geometry.addAttribute('color', colorAttribute);

// 在顶点着色器中声明一个属性变量
attribute vec3 color;

// 在顶点着色器中将属性变量传递给片元着色器
varying vec3 vColor;

void main() {
    // 将顶点颜色传递给片元着色器
    vColor = color;

    // 其他顶点着色器代码...
}

// 在片元着色器中声明一个属性变量
varying vec3 vColor;

void main() {
    // 使用顶点颜色作为片元颜色
    gl_FragColor = vec4(vColor, 1.0);

    // 其他片元着色器代码...
}