Three.js Materials and CAD Materials

Questions
, ,
1

Hello,
I am creating a customization software with Three.js. I get .mtl and .obj files from 3d design program. I already set material type from 3D CAD program but when I load obj to canvas with three.js I also have to define like this:

 mtlLoader.load( 'yaka2.mtl', function( materials ) {
         materials.preload();

         objLoader.setMaterials( materials );
       objLoader.load( 'yaka2.obj', function ( obj ) {

           // texture
           texture = textureLoader.load(kumas);

           obj.traverse( function ( child ) {
             if ( child.isMesh ) child.material = new THREE.MeshStandardMaterial({
               metalness: metalValue,
               roughness: roughValue,
               map:       texture,
               normalMap: textureNormal,
             });
           } );

           scene.add( obj );
         },
         // onProgress callback
         function ( xhr ) {
           console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
         },

         // onError callback
         function ( err ) {
           console.log( 'An error happened' );
         });
      });

SO if you look at above code, I import .mtl file from 3D CAD program then I also define which materila that I will use in THREE.js: “THREE.MeshStandardMaterial” then I also set roughness and metalness ( metalness: metalValue, roughness: roughValue).

Then my question is this: I already define which material will I use (is it shiny, is it leather, is it wool etc) at the 3D CAD program, then I export both material and .obj of the CAD program. Then I i use them in THREE.js.

Then the point is: If I already define these in CAD then WHY should I choose a material, a roughness and metalness AGAIN in THREE.js?

I hope question is clear, I want to understand why should I choose a material and other material feature for THREE.js for objects and materials imported from CAD programs. Because I already determied which material will I use BUT UNFORTUNATELY I have to arrange things again in THREE.js (or shouldn’t I?).

Am I doing wrong? Or is there a way directly using pre-created materials and objects as defined in CAD program?

I will be very glad if anyone can enlight me about the problem.
Thanks

2

If you are using OBJ/MTL, it’s not possible to define roughness and metalness values in the material definition. The MTL material format does not represent PBR materials. Hence, MTLLoader creates an instance of MeshPhongMaterial and not MeshStandardMaterial.

If it’s possible to export to glTF from your CAD program, then do so. glTF provides a proper PBR workflow.

1 Like
3
  1. Hmm, I will recap to make it clear. so when I export .MTL and .OBJ from CAD, it reduces material quality, right? So if I use .MTL and .OBJ I can not get realistic look (PBR)? It is also indicated that:
  1. BUT the above code works WITHOUT a problem. And at the above code, I use .MTL, .OBJ and THREE.MeshStandardMaterial. But as I understood from the answer, it converts THREE.MeshStandardMaterial to MeshPhongMaterial without warning me, right?
  1. My CAD does NOT support .gltf. It supports, FBX, LXO, HDF5 (Alembic), OGAWA (Alembic). So can I get same quality (PBR) with one of these? Or can I use MTL+OBJ -->to .GLTF converters. Does it do the same job? (I mean, if I use an online converter to convert .mtl+.obj to .gltf)

Thanks so much

4

The only one of these that you can load in three.js is FBX, and no, it doesn’t support PBR materials (MeshStandardMaterial) currently.

If you want to use MeshStandardMaterial with any format except for glTF (as far as I know), you will have to create the materials the way you are doing now.

5

What about this? Does it helps? Converting MTL+OBJ files into GLTF from an online converter. Does this preserve the PBR quality?

6

There’s these:


I use FBX2glTF a lot, and it’s a great tool. It can even create PBR materials. However, since roughness and metalness are not support in FBX and OBJ formats, it can’t know what settings you had in your CAD program.

To be clear, that information is not exported from your CAD program, so there’s no way for three.js to know what setting you have there.

1 Like
7

Thanks so much, for your helps:heart::heartbeat::heart: