How can I use three.js materials on loaded models?

Questions
1

I want to apply a MeshStandardMaterial to an .obj model but it doesn’t seem to work the same as adding a material to a three.js model.

All I can find in the reference is how to upload a .mtl with my .obj but I really want to experiment with the three.js materials.
Any ideas? Thanks in advanced!

2

Models consist of meshes - and meshes have materials (geometry + material = mesh). To apply a custom material to a loaded OBJ (or any other format) model, you need to traverse it’s child meshes and apply a new material to each one separately:

loadedObj.traverse((mesh) => {
  // You can also check for id / name / type here.
  mesh.material = new THREE.MeshStandardMaterial({ color: 0xff00ff });
});

If you want to apply same material to the entire model, you can create it before traversing, then just apply a clone to each child mesh.

1 Like
3

This is exactly what I was looking for! Thank you so much