Rendering issue with glTF asset

Questions
,
1

Here is the model when uploaded
1

But if i open it on window's 3D viewer its OK, Here is an example

3

Here is the code

const width = this.mount.clientWidth;

      const height = this.mount.clientHeight;

      this.mount.style.cursor = "pointer";

      var scene = new THREE.Scene();

      scene.background = new THREE.Color(0x424242);

      const camera = new THREE.PerspectiveCamera(75, width / height, 1, 1000);

      camera.position.x = 1;

      camera.position.z = 10;

      camera.position.y = 5;

      camera.lookAt(0, 0, 0);

      let renderer = new THREE.WebGLRenderer({

        antialias: true,

      });

      renderer.setClearColor("#263238");

      renderer.setSize(width, height);

      this.mount.appendChild(renderer.domElement);

      var intensity = 1.4;

      var rectLight = new THREE.RectAreaLight(0xffffff, intensity, width, height);

      rectLight.position.set(1, 1, 10);

      rectLight.lookAt(1, 1, 3);

      scene.add(rectLight);

      const controls = new OrbitControls(camera, renderer.domElement);

      controls.enablePan = false;

      controls.enableZoom = true;

      controls.enableDamping = true;

      controls.minPolarAngle = 0.8;

      controls.maxPolarAngle = 2.4;

      controls.dampingFactor = 0.07;

      controls.rotateSpeed = 0.03;

      var animate = function() {

        requestAnimationFrame(animate);

        renderer.render(scene, camera);

      };

      let loader = new GLTFLoader();

      loader.load(

        benz,

        (gltf) => {

          scene.add(gltf.scene);

          console.log(gltf.scene);

        },

        (xhr) => {

          console.log(xhr);

        },

        (error) => {

          console.log(error);

        }

      );

      animate();
2

The usage of RectAreaLight is only correct when you have the following line in your code.

Also notice that you have to import RectAreaLightUniformsLib from the examples directory. I suggest you start with a simpler light setup like an ambient + directional light.

It’s also recommended to use a PBR setup (especially an environment map) when using GLTFLoader. Use the following demo as a code template: three.js webgl - GLTFloader

1 Like
3

Yup! i solved the issue, just watched a youtube video and u are right, light was doing problems