Three.js中如何动态修改STL加载模型的顶点颜色

你修改顶点颜色后未生效的核心原因是：Three.js 不会自动识别缓冲区属性的手动修改，你需要手动标记属性需要更新，才能把修改后的颜色数据同步到GPU用于渲染。

正确的实现代码如下：

let model = this.scene.getObjectByName("myFile.stl")
let geometry = model.geometry   
const targetColor = new THREE.Color(0xFF0000)
const colorAttribute = geometry.getAttribute("color")

for (let idx = 0; idx < colorAttribute.count; idx++) {
    colorAttribute.setXYZ(idx, targetColor.r, targetColor.g, targetColor.b)
}
// 关键：标记颜色属性数据已更新，需要同步到GPU
colorAttribute.needsUpdate = true

补充注意事项：

• 请确认模型材质已开启顶点颜色支持，可通过如下代码配置：

  model.material.vertexColors = true
  // 若修改了材质配置，同样需要标记材质更新
  model.material.needsUpdate = true
  

• 提前取出颜色属性对象即可避免循环内重复调用getAttribute，提升执行性能，TypeScript环境下给属性指定THREE.BufferAttribute类型即可省去@ts-ignore注释
• 若STL加载完成后默认不存在color属性，需要先手动初始化颜色属性再执行修改操作，避免空值报错

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