Gltf model does not looking properly in three.js

I downloaded the following model from sketchfab and imported to my scene but model does not seem looking correctly especially the glass blur.

here is my code

import "./sass/main.scss";

import { Scene, PerspectiveCamera, WebGLRenderer, DirectionalLight, ACESFilmicToneMapping, sRGBEncoding, Object3D, Mesh, MeshStandardMaterial, ReinhardToneMapping, AmbientLight, EquirectangularReflectionMapping,
} from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

const scene = new Scene();
const camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new WebGLRenderer({
    canvas: document.querySelector("canvas#webgl"),
    antialias: true
});
renderer.toneMapping = ACESFilmicToneMapping;
renderer.outputEncoding = sRGBEncoding;
renderer.physicallyCorrectLights = true;
renderer.toneMappingExposure = 1
renderer.shadowMap.enabled = true;

const controls = new OrbitControls(camera, renderer.domElement);
camera.rotation.reorder("YXZ")
camera.position.set(2, 1.5, 3.5);
camera.rotation.set(-0.25, Math.PI * 0.25, 0);
renderer.setSize(window.innerWidth, window.innerHeight)

const gltfLoader = new GLTFLoader();
const rgbeLoader = new RGBELoader();

const environmentMap = await rgbeLoader.loadAsync("./assets/environment/puresky.hdr")
environmentMap.mapping = EquirectangularReflectionMapping;
scene.environment = environmentMap;

await gltfLoader.loadAsync("./assets/models/scene.gltf").then(gltf => {
    scene.add(gltf.scene);
});

mapAllElements();

function render() {

    renderer.render(scene, camera);

    requestAnimationFrame(render);
}

render();

function mapAllElements() {
    scene.traverse((child) => {
        if (child instanceof Mesh && child.material instanceof MeshStandardMaterial) {
            child.material.envMap = environmentMap;
            child.material.envMapIntensity = 1;
            child.material.needsUpdate = true;
        }
    })
}

I searched my problem on the internet but couldn’t find anything useful and I also tried other gltf models from sketchfab but other models also does not looking properly.

My code is using top-level-await feature and I enabled from webpack.config.js

>Solution :

The way the model looks is tied to the Viewer in which it is loaded. If you want to recreate the effects you can create a new material using the THREE.MeshPhysicalMaterial class, which is a physically-based material that can simulate realistic lighting and materials.

A barebones example is as follows:

scene.traverse((child) => {
    if (child instanceof Mesh && child.material instanceof MeshStandardMaterial) {
      if (child.name.includes("glass")) {
        // Create a new MeshPhysicalMaterial for the glass object
        const glassMaterial = new THREE.MeshPhysicalMaterial({
          color: 0xffffff,
          metalness: 0,
          roughness: 0.1,
          transparent: true,
          transmission: 0.9,
          opacity: 0.7,
          envMap: environmentMap,
          envMapIntensity: 1,
          side: THREE.DoubleSide,
        });
        // Replace the existing material with the new glass material
        child.material = glassMaterial;
      } else {
        // For non-glass objects, just add the environment map
        child.material.envMap = environmentMap;
        child.material.envMapIntensity = 1;
      }
      child.material.needsUpdate = true;
    }
  });
}

If you don’t want to re-invent the wheel, you can also take a look at WebGi, where you have much finer grained control through an accessible plugin system.