GLTF : Metalness difference between my scene and THREE.JS editor https://threejs.org/editor/

I’ve got a gltf file. When I import it inside the Three.js editor (https://threejs.org/editor/) I get a correct result when I add an environment map.

On the other hand, when I import my gltf in my project scene I’ve a different result. Even when I use the very same HDRI image. The metalness is way too shinny in this case.

Does anyone know what I’m missing? Thank you.

renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;

new RGBELoader()
    .load( 'royal_esplanade_1k.hdr', function ( texture ) {

        texture.mapping = THREE.EquirectangularReflectionMapping;
        scene.environment = texture;

    } );

loader.load(
    './gltf/canette.glb',

    // called when the resource is loaded
    function ( gltf ) {

        obj = gltf.scene;

        mixer = new THREE.AnimationMixer( gltf.scene );
        action = mixer.clipAction( gltf.animations[ 0 ] );
        

        //obj
        scene.add( obj );
    }
);

EDIT :

Here‘s a live demo. Here‘s the gltf model.

Answer

Unfortunately, you are using a code snippet which does not match your actual three.js version. You have to use at least r131 (or better the latest one r141). Right now, you are using r129.

If you use three.js versions below r131, you have to use PMREMGenerator to prepare the environment map that you apply to PBR materials. Starting from r131, the engine is doing this for you so you don’t have to worry about PMREMGenerator at all.