.glb model is being blurred after rendering

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);

    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

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