Search code examples
reactjsthree.jsreact-three-fiberreact-three-drei

Can i use roughness map with obj model?


I am new to Three.js. I have a *.obj model and normal, albedo, emissive and roughness maps. I tried to set maps with this code:

const orbObj = useLoader(OBJLoader, 'orb/orb.obj');

const [orb_albedo, orb_emissive, orb_normal, orb_roughness] = useLoader(TextureLoader, [
    'orb/orb_albedo.png',
    'orb/orb_emissive.png',
    'orb/orb_normal.png',
    'orb/orb_roughness.png',
  ]);

orbObj.traverse(function (node) {
    if (node instanceof Mesh) {
      node.material.map = orb_albedo;
      node.material.emissiveMap = orb_emissive;
      node.material.normalMap = orb_normal;
    }
});

But there is not roughnessMap property in the orbObj. So how can i use roughness map?


Solution

  • The answer is using MeshStandardMaterial:

    import { MeshStandardMaterial } from 'three';
    
    //...
    
    orbObj.traverse(function (node) {
        if (node instanceof Mesh) {
          node.material = new MeshStandardMaterial();
          node.material.map = orb_albedo;
          node.material.emissiveMap = orb_emissive;
          node.material.normalMap = orb_normal;
          node.material.roughnessMap = orb_roughness;
        }
      });