Beginner question: My loaded glb Model looks way worse than in sandbox

[DHartenfels]

Hey there!
Really happy for any help i could obtain.
I’m doing my very first steps with Three.js and managed to load in a model that i want to display. However my loaded model looks way worse than in any sandbox i’ve tried (three.js, babylon.js and https://gltf.pmnd.rs/)
Now i am sure there are many things i can do and i am eager to lern but i dont really know where to start. i’ve tried to change my spotlight lighning, adding castShadow, receiveShadow and material.envMapIntensity to the mesh child but it did not improve anything at all, sadly.
For reference these are my and the expected renderes:

and this is my code to load the model:

function loadMesh() {
  loader.load(
    "/assets/K4_white_gold.glb",
    (gltf) => {
      mesh = gltf.scene;

      originalMeshState = mesh.clone();

      mesh.traverse((child) => {
        if (child.isMesh) {
          child.castShadow = true;
          child.receiveShadow = true;
          child.material.envMapIntensity = 0.8;
        }
      });

      mesh.position.set(0, 0.9, -1);
      scene.add(mesh);

      document.getElementById("progress-container").style.display = "none";
    },
    (xhr) => {
      document.getElementById("progress").innerHTML = `LOADING ${
        Math.max(xhr.loaded / xhr.total, 1) * 100
      }/100`;
    }
  );
}

aswell as my lighning, and scene:

const spotLight = new THREE.SpotLight(0xffffff, 3, 100, 0.22, 1);
spotLight.position.set(0, 25, 0);
spotLight.castShadow = false;
spotLight.shadow.bias = -0.0001;
scene.add(spotLight);

const ambiLight = new THREE.AmbientLight(0xffffff, 0.3);
scene.add(ambiLight);

const canvasHolder = document.getElementById("canvasHolder");
console.log(canvasHolder);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.outputColorSpace = THREE.SRGBColorSpace;

console.log(canvasHolder.innerWidth, canvasHolder.innerHeight);
renderer.setSize(canvasHolder.clientWidth, canvasHolder.clientHeight);
renderer.setClearColor(0xffffff);
renderer.setPixelRatio(window.devicePixelRatio);

renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;

document.getElementById("canvasHolder").appendChild(renderer.domElement);

scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
  5,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.set(3, -5, 2);

const helper = new THREE.CameraHelper(camera);
scene.add(helper);

Happy to recieve any inputs and help towards improving my first staps, and thank you in advance for any input

[mjurczyk]

If you are using MeshStandardMaterial that is configured to be metallic - you must use an environment map / reflections map (docs.) Otherwise the material has nothing to reflect and just renders the reflections just black.

HDR / EXR are the most popular reflection (ie. IBL) map formats - you can find quite a ton of them online for free (Polyhaven, BlockadeLabs Skybox AI etc.) You load them similarly to the usual textures, but be sure to use the RGBELoader instead of TextureLoader. Then set the loaded texture to scene.environment (global, will be applied to all materials in the scene) or material.envMap (local, per-material.)

[DHartenfels]

Wow thank you so much! Using a HDR did improve the quality by way more than i expected.

This is now looking very nice. Thanks for your input <3