My models are getting overexposed

Questions
,
1

I am trying to add two models one over the other but they are getting overexposed.
Man - https://drive.google.com/file/d/1zcsy8Gui2or8MrST1HVBhk4E_TlXxrZn/view?usp=sharing
Ihram_Full.glb (3.7 MB)

The code is written in typescript

     import * as THREE from "three";
        import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
        import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

        let scene: THREE.Scene, camera: THREE.Camera, renderer: THREE.WebGLRenderer;

        function animate() {
          requestAnimationFrame(animate);
          renderer.render(scene, camera);
        }

        export const init = (modelDivId: string) => {
          //Scene
          scene = new THREE.Scene();
          scene.background = new THREE.Color(0xffffff);
          //Renderer
          renderer = new THREE.WebGLRenderer({ antialias: true });
          renderer.setSize(window.innerWidth, window.innerHeight);
          // renderer.shadowMap.enabled = true;
          renderer.toneMappingExposure = 0.5;

          //Ambient Light
          const ambiLight = new THREE.AmbientLight(0xfffef2, 1);
          scene.add(ambiLight);

          //Spot Light
          // const spotLight = new THREE.SpotLight(0xf6cdb8, 0.1);
          // spotLight.position.set(140, 320, 300);
          // // spotLight.castShadow = true;
          // spotLight.shadow.mapSize.width = 1000;
          // spotLight.shadow.mapSize.height = 1000;
          // spotLight.shadow.camera.near = 0.2;
          // spotLight.shadow.camera.far = 2000;
          // scene.add(spotLight);

          // var helper = new THREE.CameraHelper(spotLight.shadow.camera);
          // scene.add(helper);

          //Floor
          // const meshFloor = new THREE.Mesh(
          //   new THREE.PlaneGeometry(500, 500, 500, 500),
          //   new THREE.MeshPhongMaterial({ color: 0xececec })
          // );
          // meshFloor.position.set(-200, 0, -200);
          // meshFloor.rotation.x -= Math.PI / 2;
          // meshFloor.receiveShadow = true;
          // scene.add(meshFloor);

          //Camera
          camera = new THREE.PerspectiveCamera(
        40,
        window.innerWidth / window.innerHeight,
        0.1,
        5000
          );
          camera.position.z = 400;
          camera.position.y = 100;

          const modelDiv = document.getElementById(modelDivId);
          if (!modelDiv) {
        throw new Error("No model container");
          }

          modelDiv.appendChild(renderer.domElement);
          new OrbitControls(camera, renderer.domElement);

          const loader = new GLTFLoader();
          loader.load("./model/Hajj_Man02.glb", function (gltf) {
        // gltf.scene.traverse(function (child) {
        //   child.castShadow = true;
        //   child.receiveShadow = true;
        // });
        const man = gltf.scene.children[0];
        man.scale.set(80, 80, 80);
        man.rotateY(Math.PI);
        scene.add(gltf.scene);
        animate();
          });

          loader.load("./model/Ihram_Full.glb", function (gltf) {
        // gltf.scene.traverse(function (child) {
        //   child.castShadow = true;
        //   child.receiveShadow = true;
        // });
        const cloth = gltf.scene.children[0];
        cloth.scale.set(80, 80, 80);
        scene.add(gltf.scene);
        animate();
          });
        };
2

Seems to be modeling issue to me. The three.js editor renders the file like so:

image
image944×1060 146 KB

And BabylonJS sandbox produces:

image
image1510×1892 329 KB

Are you aware that your glTF asset contains a camera and point light? If you author the asset by yourself, I suggest you export without both entities. I’m not sure it fixed the issue but removing the point light in the editor somewhat improves the result.

3

Than you, I wasn’t aware that my asset contains a camera and point light