.glb model is being blurred after rendering

Questions
,
1

image
image738×612 27.5 KB

Issue:
Model is being blurred after being rendered on the browser…

     const  renderer = new THREE.WebGLRenderer({
              antialias: true,
              canvas: canvas,
     });

    // Renderer settings
    renderer.outputEncoding = THREE.sRGBEncoding;
    renderer.physicallyCorrectLights = true;
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    renderer.toneMapping = THREE.CineonToneMapping;
    renderer.toneMappingExposure = 1.5;

    this.renderer.setSize(sizes.width, sizes.height);
    renderer.setPixelRatio(sizes.devicePixelRatio);

    const sizes = {
      width = window.innerWidth;
      height = window.innerHeight;
      devicePixelRatio = Math.max(2, window.devicePixelRatio);
    }

I tried:

  • Loading model just GLFTLoader instead along with DRACOLoader
  • Changing the devicePixelRatio
  • Searching for answers of support on forums and FAQs
2

I think you need to declare your sizes before setting renderer size and pixel ratio