CODEWITHSUNDEEP
three.js3dgltf
mheavers
mheavers

Reputation: 30168

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

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.

Upvotes: 2

Views: 5194

Answers (1)

Don McCurdy
Don McCurdy

Reputation: 11980

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.

Upvotes: 9

Related Questions