基于Three.js实现点颜色随机切换：每0.5秒将部分点改为白色

嘿，看起来你已经把顶点颜色的初始化工作做得很扎实了！接下来只需要添加定时更新逻辑，就能实现每0.5秒随机将部分点改成白色的需求，我给你一步步拆解：

1. 先确保材质支持顶点颜色 #

首先要确认你的网格材质开启了顶点颜色渲染，不然就算修改了颜色数组，也不会在画面上生效：

// 示例：用MeshBasicMaterial的情况
this.material = new THREE.MeshBasicMaterial({ 
  vertexColors: THREE.VertexColors,
  // 按需添加其他材质属性，比如wireframe等
});

// 如果是PBR材质（比如MeshStandardMaterial），同样要开启vertexColors
// this.material = new THREE.MeshStandardMaterial({ vertexColors: THREE.VertexColors });

2. 编写定时更新颜色的函数 #

我们可以用setInterval来每500毫秒执行一次颜色修改操作，核心是随机选中部分顶点，把它们的RGB值改成1（白色），然后标记颜色属性需要更新：

// 先把定时器存起来，方便后续销毁
this.colorUpdateTimer = setInterval(() => {
  const colorAttr = this.geom.attributes.color;
  const colorArray = colorAttr.array;
  const totalVertices = this.geom.attributes.position.count;

  // 每次随机修改10%的顶点（你可以根据需求调整这个比例）
  const updateNum = Math.floor(totalVertices * 0.1);

  for (let i = 0; i < updateNum; i++) {
    // 随机选一个顶点索引
    const randomVertexIdx = THREE.Math.randInt(0, totalVertices - 1);
    // 把这个顶点的RGB设置为白色
    colorArray[randomVertexIdx * 3] = 1;     // 红色通道
    colorArray[randomVertexIdx * 3 + 1] = 1; // 绿色通道
    colorArray[randomVertexIdx * 3 + 2] = 1; // 蓝色通道
  }

  // 必须设置这个属性为true，Three.js才会重新读取颜色数组并更新渲染
  colorAttr.needsUpdate = true;
}, 500);

3. 别忘了清理定时器（重要） #

当你的组件或场景销毁时，一定要清除这个定时器，避免内存泄漏：

// 比如在React的useEffect清理回调、Vue的beforeUnmount钩子，或者你自己的销毁方法里
clearInterval(this.colorUpdateTimer);

额外小提示 #

• 你的球体顶点数量很多（350×90=31500个），如果每次修改的顶点数量太多，可能会有性能波动，建议根据实际效果调整updateNum的比例。
• 如果不想重复修改同一个顶点，可以维护一个已修改的顶点索引集合，每次随机选的时候跳过已修改的，但如果不需要严格避免重复，这个步骤可以省略，不会影响功能。

内容的提问来源于stack exchange，提问作者Elizabeth