Three.js使用OBJLoader解析OBJ文件时如何为模型设置颜色？

OBJLoader.parse() 方法返回的模型根节点与 load() 回调中拿到的模型结构完全一致，复用load场景下的遍历逻辑即可完成颜色设置，完整实现代码如下：

const objLoader = new OBJLoader()
const root = objLoader.parse(model.parametersData)

// 遍历模型所有子节点修改颜色
root.traverse(function(child) {
  if (child instanceof THREE.Mesh) {
    // 单材质场景直接设置
    if (!Array.isArray(child.material)) {
      child.material.color.set(0xffb830)
      return
    }
    // 多材质场景遍历所有材质修改
    child.material.forEach(mat => {
      mat.color.set(0xffb830)
    })
  }
})

注意事项 #

• 优先使用color.set()方法赋值，避免直接赋值16进制数值引发的类型报错，也可以显式传入THREE.Color实例：child.material.color = new THREE.Color(0xffb830)
• 如果需要给不同网格设置差异化颜色，可以通过child.name、child.id等属性做判断后分别赋值

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