Error while copying material

Questions
1

Hi,
I’m loading gltf models using THREE.GLTFLoader. I changed the material of all the meshes from THREE.MeshStandardMaterial to THREE.MeshPhongMaterial by

model.traverse((mesh) => {
        if (!mesh.isMesh) return;
        var oldMaterial = mesh.material;
        mesh.material = new THREE.MeshPhongMaterial().copy(oldMaterial);
})

I’m getting the error TypeError: Cannot read properties of undefined (reading ‘r’).
This is when trying to copy the specular value that the standard material does not have. how can I solve this?
Thanks,
Binoy

2

The copy() method of MeshPhongMaterial requires another MeshPhongMaterial.

The best way to work around this would probably be to invoke the copy method of Material or MeshBasicMaterial. Material is a parent class and safe to use. MeshBasicMaterial has (somewhat by coincidence) a subset of the properties of both MeshPhongMaterial and MeshStandardMaterial:

MeshBasicMaterial.prototype.copy.call(targetMaterial, sourceMaterial);

Could I ask why you would like to convert the materials from Standard to Phong?

1 Like
3

@donmccurdy can you demonstrate how to add envMap on THREE.MeshPhongMaterial I’ve been trying this for quite some time but after applying envMap the mesh turns black. I tried changing the ‘reflectivity’ and ‘combine’ properties but didn’t had any effect. material.normalMap, material.map etc. are working fine also changing scene.environment doesn’t make any difference.

the model I’ve been trying is :
test.gltf (819.6 KB)
I uploaded the same to three.js editor and tried the envMap it was working fine there.

Thanks,
Binoy

4

Adding an envMap to MeshPhongMaterial is supposed to work the same as with any other material, I’m not sure why it would go black. You may need to share an example (fiddle, codepen, zip, etc.) to reproduce the issue.