I am currently working on a scene that includes:
AmbientLight color: light blue
PointLight color: pink
a gltf object loaded with textures
Using the GLTFLoader, I successfully loaded a gltf object with texture map. The model is displayed correctly with textures using the default MeshStandardMaterial as shown in picture 1. Now, my goal is to change all the MeshStandardMaterial to MeshPhongMaterial. To achieve this, I loop through all the meshes and update the material as follows:
// 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()
}
However, after making this change, all the mesh colors become flat and match my AmbientLight color. The meshes no longer respond to lighting from sources such as SpotLight or PointLight, as seen in picture 2 where the pink light from the PointLight is missing.
If anyone can provide assistance on why this happens and how I can replace the materials with MeshPhongMaterial, it would be greatly appreciated.
You can view the issue on Codepen here. The problem occurs when you click on Replace Horse Mesh, resulting in the disappearance of the pink light.