常用属性

外部模型材质是否共享的问题

美术通过三维建模软件，比如 Blender 绘制好一个三维场景以后，一些外观一样的 Mesh，可能会共享一个材质对象。

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

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

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

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

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

解决问题方向:下面两个方案，可以任选其一：

• 三维建模软件中设置，需要代码改变材质的 Mesh 不要共享材质，要独享材质。
• 代码批量更改：克隆材质对象，重新赋值给 mesh 的材质属性

更换 gltf 颜色贴图

执行mesh.material.map = texture;新的纹理对象Texture赋值给.material.map就可以更换材质贴图。

loader.load("../手机模型.glb", function (gltf) {
  const mesh = gltf.scene.children[0]; // 获取Mesh
  mesh.material.map = texture; //更换不同风格的颜色贴图
});

注意：

如果直接给 gltf 模型材质设置.map属性更换贴图，会出现纹理贴图错位的问题，这主要和纹理对象Texture的翻转属性.flipY有关。

纹理对象 Texture 翻转属性.flipY 默认值

.flipY表示是否翻转纹理贴图在Mesh上的显示位置。纹理对象Texture翻转属性.flipY默认值是true。

gltf 的贴图翻转属性.flipY 默认值

gltf的贴图翻转属性.flipY默认值是false。

loader.load("../手机模型.glb", function (gltf) {
  const mesh = gltf.scene.children[0]; //获取Mesh
  console.log(".flipY", mesh.material.map.flipY);
});

注意：

如果更换单独加载的纹理贴图，比如颜色贴图.map，注意把纹理贴图.flipY 的值设置给 gltf 中纹理值 false。

// 是否翻转纹理贴图

texture.flipY = false;