Three.js加载1080P纹理渲染模糊问题求助

你的1920×1080分辨率PNG纹理本身足够清晰，无需更换SVG或低分辨率纹理，问题出在代码的纹理设置逻辑上，以下是具体修复方案：

1. 修正纹理滤镜设置与更新逻辑 #

你在纹理加载完成后设置了滤镜，但未通知Three.js纹理参数已变更，同时需根据纹理尺寸调整过滤模式：

var textureLoader = new THREE.TextureLoader();
var wrappingTexture = textureLoader.load(this.texture, () => {
  // 检查纹理尺寸是否为2的幂次，非幂次纹理无法生成有效mipmap
  if (!THREE.Math.isPowerOfTwo(wrappingTexture.image.width) || !THREE.Math.isPowerOfTwo(wrappingTexture.image.height)) {
    wrappingTexture.minFilter = THREE.LinearFilter;
  } else {
    wrappingTexture.minFilter = THREE.LinearMipMapLinearFilter;
    wrappingTexture.generateMipmaps = true; // 确保生成mipmap
  }
  wrappingTexture.magFilter = THREE.LinearFilter;
  wrappingTexture.needsUpdate = true; // 必须添加，通知Three.js更新纹理参数

  // 球体创建代码保持不变
  var sphereGeometry = new THREE.SphereGeometry(10, 256, 256);
  var wrappingMaterial = new THREE.MeshBasicMaterial({
    map: wrappingTexture,
    transparent: true,
    opacity: 0.5,
  });
  var sphere = new THREE.Mesh(sphereGeometry, wrappingMaterial);
  scene.add(sphere);
})

2. 开启各向异性过滤提升斜视角清晰度 #

各向异性过滤可显著优化纹理在非正视角下的显示效果，添加以下代码到纹理参数设置部分：

wrappingTexture.anisotropy = renderer.capabilities.getMaxAnisotropy();

关于纹理类型的选择 #

• SVG纹理：SVG是矢量格式，但Three.js加载时需先转换为位图，转换时仍需指定分辨率，若分辨率不足依然会模糊，对当前场景来说，优化现有PNG的渲染设置更高效。
• 低分辨率纹理：只会加剧模糊问题，完全没有必要使用，你的1920×1080纹理分辨率远高于104×104的渲染画布，足够满足清晰显示需求。

内容的提问来源于stack exchange，提问作者Kaki Master Of Time