Three.js中如何为Object3D对象着色？TypeScript开发遇类型问题求助

这个错误确实是TypeScript的严格类型检查导致的，但本质是Three.js的类型定义逻辑：Material是所有材质的基类，并非所有材质都具备color属性（比如ShadowMaterial就没有），所以TypeScript默认不会允许你直接访问Material类型的color属性。

修正步骤： #

1. 明确材质具体类型：将材质断言为带有color属性的具体材质类型，比如MeshStandardMaterial、MeshBasicMaterial等（根据你导入模型使用的材质类型选择）。
2. 修正setHex参数：setHex接收的是十六进制数值，不是字符串"red"，你可以直接写0xff0000，或者使用Three.js内置的ColorKeywords常量。

修正后的代码示例： #

// 获取目标Mesh并断言类型
const targetMesh = this.scene.children[4].getObjectByName(intersects[0].object.name) as THREE.Mesh;

// 处理单个材质的情况
if (!Array.isArray(targetMesh.material)) {
  // 将材质断言为具体类型，比如MeshStandardMaterial
  const mat = targetMesh.material as THREE.MeshStandardMaterial;
  // 设置红色
  mat.color.setHex(0xff0000);
} else {
  // 处理模型带有多个材质的情况
  targetMesh.material.forEach(material => {
    // 先判断材质是否有color属性，避免报错
    if ('color' in material) {
      (material as THREE.MeshStandardMaterial).color.setHex(0xff0000);
    }
  });
}

补充说明： #

如果不确定模型使用的具体材质类型，可以通过console.log(targetMesh.material)打印材质对象，查看其类型后再做对应断言。TypeScript的类型检查在这里是帮你避免操作不支持color的材质，属于合理限制。

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