Best practices to export and import GLB file to render metals and textures

Hello,

I am making a model in AutoDesk Max and trying to diplay it on the web with three.

However, it is rendered completely different than in the software: the body reflects light and the metals are not rendered at all (looks like plastic).

What are the best practices to export and then import a model in Three.js so that it renders the same ?

Thank you very much,

1 Like

Hi ! Do your materials have an envMap ?

Per https://threejs.org/docs/#manual/en/introduction/Loading-3D-models, we recommend exporting via glTF. For 3DS Max you can use the glTF exporter written by the BabylonJS team: https://doc.babylonjs.com/resources/3dsmax_to_gltf

For more specific help you’ll need to provide more details – screenshots, material configuration before/after, how you’re exporting so far, etc.

1 Like

Hey!
Spent the whole day on it. I have found the solution to render metal on a loaded gltf model :

var reflectionCube = new THREE.CubeTextureLoader().load( urls );
  avatar.traverse( function ( child ) {

      if ( child instanceof THREE.Mesh ) {

          child.material.envMap = reflectionCube;
          child.material.envMapIntensity = 0.7;
          // add any other properties you want here. check the docs.

      }

  } );
2 Likes

Spent whole day trying to render gLTF containing metal materials. Tried to follow the above recommendation, but it doesn’t seem to work:

        var textureLoader = new THREE.TextureLoader();
        textureLoader.load('assets/textures/wave-textures.png', (texture) => {
            gltf.scene.children.forEach((child) => {
                child.children.forEach((c) => {
                    if(c instanceof THREE.Mesh && c.material.metalness === 1) {
                        c.material.envMap = texture;
                        c.material.envMapIntensity = 0.7;
                    };
                });
            });
        });

Metals look black despite anything. Am I doing something wrong?