Ready Player Me Avatar texture/lightning rendering in ThreeJS and Matterport

Question

I try to import a Ready Player Me GLB avatar into a Matterport scene (in ThreeJS). It works but the avatar is very flat (left picture) compared to the rendering into RPM (right picture) or basic GLTF Viewer. I don't understand what I missed ? Pseudo code :

const gltfLoader = new THREE.GLTFLoader();
gltfLoader.load('https://api.readyplayer.me/v1/avatars/63580183b445da7aa57b9ce3.glb', 
(gltf) => {
   this.mesh = gltf.scene;
   const light = new THREE.AmbientLight( 0xFFFFFF, 1 );
   light.castShadow = true
   this.mesh.add( light );
   ...
}, undefined);

On the WebGL part I have access to Matterport renderer :

(renderer, THREE, effectComposer) => {   
    renderer.outputEncoding = THREE.sRGBEncoding
    renderer.toneMapping = THREE.ACESFilmicToneMapping
}

Is it related to Antialias ? Or a paramter or lighting that flatten hair and hands ? Or is it related to texture ?

Thanks !

EDIT 11/12/2022: Thanks to @Mugen87, I find how to use the EquirectangularShader from GLTFLoader sample. This code works with Matterport context.

let pmremGenerator = new THREE.PMREMGenerator( this.context.renderer );
pmremGenerator.compileEquirectangularShader();
let envMap = pmremGenerator.fromScene( new THREE.RoomEnvironment() ).texture;
this.context.scene.environment = envMap;

Answer 1

Instead of using a single instance of AmbientLight, apply a more advanced type of environmental lighting to your scene. Especially if you already enabled tone mapping, consider to use a HDR environment map. The basic GLTFLoader example of three.js is a good code template. The most important part is:

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

        texture.mapping = THREE.EquirectangularReflectionMapping;

        scene.environment = texture;

        // more scene setup

    } );

Applying an environment map to Scene.environment ensures all PBR materials in the scene are going to use it.