Model in three js editor looks completely different from the model in code or the website

Questions
1

The realstic render in the three js editor looks very good than what i get in my actual website. Below is what I get in three js site

image (1)
image (1)919×730 203 KB

My code:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js GLB Loader</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
    <script>
        // Scene setup
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({antialias: true});
        renderer.outputColorSpace = THREE.SRGBColorSpace;
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // Lighting
        const dirLight = new THREE.DirectionalLight(0xffffff, 1);
        dirLight.position.set(0, 200, 100);
        scene.add(dirLight);

        // GLTF Loader
        const loader = new THREE.GLTFLoader();
        loader.load('./MoonJellyfishT.glb', function (gltf) {
            scene.add(gltf.scene);
            gltf.scene.position.set(0, 0, 0);
            gltf.scene.scale.set(1, 1, 1);
        }, undefined, function (error) {
            console.error(error);
        });

        camera.position.z = 5;

// Add OrbitControls
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;


        // Animation loop
        function animate() {
            requestAnimationFrame(animate);
            controls.update();
            renderer.render(scene, camera);
        }
        animate();
    </script>
</body>
</html>```

Here is how it looks in three js editor with realistic mode on
![image (2)|690x338](upload://6NzXyQLcttQCgUnlFxkV14DMor8.jpeg)
Its just one of them but you get the difference. I luckily got this model from sketchfab dev whose sketchfab render looks like this: https://sketchfab.com/3d-models/moon-jellyfish-c5f1d70402e240dbb3d83c50ec1f8b60

Not sure what it wrong with the whole thing and setup. I am very new to three.js but have experience with blender so I made sure it looked fine in blender before loading it.
2

The built-in renderers in three.js are realtime rasterizers. The “realistic” renderer in the three.js Editor is instead using a pathtracer, which is slower but does often give nicer results. For the pathtracer, see:

3

Thanks for your quick response I will see how to implement this!