three.js - 我如何将加载的 gltf 中的所有 Material 从 mesh basic 转换为 mesh phong？

Question

我正在将 GLTF 模型加载到 threejs 中。对象上使用的所有 Material (还有很多)都使用网格基础 Material ，我们希望它们是可以受光影响的 Material 。有没有办法将所有 Material 从基本 Material 转换为可以接收光线的 Material ，如 Phong(包括它们现有的属性？)。

我目前可以按如下方式添加新 Material :

glb.scene.traverse(child => {
        if (child.isMesh) {
          //child.material = new THREE.MeshPhongMaterial({ flatShading: true });
        }
      });

但一切看起来都是纯灰色，不包含它所替换的网格基本 Material 的任何属性。

Answer 1

glTF 中的默认 Material 通常映射到 three.js 中的 MeshStandardMaterial — 如果您的模型正在创建 MeshBasicMaterial，则它必须启用“unlit”glTF 扩展 (KHR_materials_unlit)。除了在像 Blender 这样的建模工具中更改它可能是最简单的，您还可以在 three.js 中转换它...

model.traverse((child) => {

  if ( ! child.isMesh ) return;

  var prevMaterial = child.material;

  child.material = new MeshPhongMaterial();

  MeshBasicMaterial.prototype.copy.call( child.material, prevMaterial );

});

请注意，反过来不一定有效——在更简单的 Material (如 MeshBasicMaterial)上调用复杂 Material 的 copy() 方法会导致它寻找不存在的属性。