how do i convert all materials in a loaded gltf from mesh basic to mesh phong?

user_287436 0
Viewed 2809

I am loading a GLTF model into threejs. All the materials used on the object (and there a quite a few of them), use a mesh basic material, and we want them to be a material that can be affected by lights. Is there a way to convert all materials from a basic material to one that can receive lights, like Phong (including their existing properties?).

I can currently add a new material as follows:

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

but everything just looks a solid gray color and doesn't contain any of the properties of the mesh basic material it replaced.

gltf three.js 3d
1 Answers

The default material in glTF is usually mapped to MeshStandardMaterial in three.js — your model must have the "unlit" glTF extension (KHR_materials_unlit) enabled if it's creating MeshBasicMaterial. Short of changing that in a modeling tool like Blender, which might be easiest, you can also convert it in three.js...

model.traverse((child) => {

  if ( ! child.isMesh ) return;

  var prevMaterial = child.material;

  child.material = new MeshPhongMaterial();

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

});

Note that the reverse does not necessarily work — calling a complex material's copy() method on a simpler material (like MeshBasicMaterial) will cause it to look for properties that do not exist.

user_13147620
Related