threejs 外部模型材质是否共享的问题 学习笔记

threejs yekong

改变一个模型颜色其它模型跟着变化

由于楼房的Mesh共享了1号楼Mesh的材质,当你通过mesh1.material改变mesh1材质,本质上是改变所有楼Mesh的材质。

const mesh1 = gltf.scene.getObjectByName("1号楼") //改变1号楼mesh材质颜色
mesh1.material.color.set(0xff0000)

name标记材质,判断两个mesh是否共享材质

通过.name标记材质,测试mesh1和mesh2是否共享了材质

const mesh1 = gltf.scene.getObjectByName('1号楼')
mesh1.material.name = '楼房材质'
//通过name标记mesh1对应材质 
const mesh2 = gltf.scene.getObjectByName('2号楼')
//通过name 相同,可以批判的mesh1.material 和mesh2.material共享了同一个材质对象
console.log('mesh2.material.name', mesh2.material.name)

解决问题方向

改变一个模型颜色其它模型跟着变化,是因为多个模型对象共享了材质,如果单独改变一个模型的材质,比如颜色,下面两个方案,可以任选其一。
1,三维建模软件中设置,需要代码改变材质的Mesh不要共享材质,要独享材质。

  1. 代码批量更改:克隆材质对象,重新赋值给mesh的材质属性

代码方式解决多个mesh共享材质的问题

gltf.scene.getObjectByName('小区房子').traverse(function (obj) {
  if (obj.isMesh) {
    obj.material = obj.material.clone()
  }
})
mesh1.material.color.set(0xffff00)
mesh2.material.color.set(0xffff00)
喜欢