Low quality texture glb but gets sharper when zooming out



Hi, when my glb model is loaded, the textures appear somewhat blurry. When I zoom out from 75% to 67% in my browser, the texture gets significantly sharper. What could be the problem here?

var sceneContainer = document.getElementById('canvas');    
//canvas dimensions width : 500px; height : 950px;
camera = new THREE.PerspectiveCamera(40,
sceneContainer.offsetWidth / sceneContainer.offsetHeight);

renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( sceneContainer.offsetWidth, sceneContainer.offsetHeight );
sceneContainer.appendChild( renderer.domElement );

window.addEventListener( 'resize', onWindowResize, false );
  function onWindowResize() {
    renderer.setSize( sceneContainer.offsetWidth, sceneContainer.offsetHeight );
    camera.aspect = ( sceneContainer.offsetWidth / sceneContainer.offsetHeight );
  // I have applied the following to the glb's material
 //object.material.map.anisotropy = maxAnisotropy;
 //object.material.map.minFilter = THREE.LinearFilter;

The texture quality is 2048x2048 power of 2. Thanks in advance!


If you change minFilter to THREE.LinearFilter, you have a worse texture filtering quality than the default setting THREE.LinearMipMapLinearFilter which uses mipmapping.


Thanks for replying. If I use the default, the texture quality looks just as bad as it did when I zoomed out.


A live example that demonstrate the issue would be helpful now.