GLTFLoader 不允许替换其默认材质

Question

我有以下场景。

AmbientLight颜色：浅蓝色

PointLight颜色：粉色

带有纹理的加载 gltf 对象

我使用GLTFLoader加载了一个带有纹理贴图的 gltf 对象，在图 1 中默认使用MeshStandardMaterial正确加载了模型。现在我想将所有MeshStandardMaterial更改为MeshPhongMaterial ，我这样做的方式只是循环遍历所有网格，并更新材料，例如：

// find gltf scene
var gltfScene = scene.children.find(ele => ele.type === 'Scene');    
var meshes = gltfScene.children;
for (var i = 0; i < meshes.length; i++) {
  // for each mesh, change to MeshPhongMaterial
  meshes[i].material = new THREE.MeshPhongMaterial()
}

然而，在我这样做之后，所有的网格颜色都变成了我的AmbientLight颜色的平面颜色，并且它们不再SpotLight 、 PointLight ）做出反应，您可以看到PointLight的粉红色消失了。

谁能帮助我为什么以及如何用MeshPhongMaterial替换。

这是codepen https://codepen.io/chen-xu/pen/XWJWbwj ，如果你点击Replace Horse Mesh会出现问题，你会看到粉红色的光消失了。

Answer 1

看来您没有正确遍历glTF场景。 它应该是这样的：

gltf.scene.traverse( ( child ) => { 

    if ( child.isMesh ) {

        child.material = new THREE.MeshPhongMaterial();

    }

} );

three.js R111

Answer 2

谢谢@Mugen87，这个答案也是你在 Github 上的，我们需要添加{flatShading: true}

gltf.scene.traverse( ( child ) => { 

    if ( child.isMesh ) {

        child.material = new THREE.MeshPhongMaterial({flatShading: true});

    }

} );

Answer 3

我必须做几个额外的步骤才能让它为我工作，同样使用 gltf。

gltf.scene.traverse((child) => {

        if (child.isMesh) {

          const originalMaterial = child.material;
          const newMaterial = new THREE.MeshPhongMaterial();

          // these are missing and required
          child.geometry.computeVertexNormals();
          // use the texture from the original material
          newMaterial.map = originalMaterial.map;

          child.material = newMaterial;
      }
})

注意： flatShading = true的作品，但不会为您提供大多数人可能想要的更平滑的插值阴影。