three.js 贴图 模糊

### 解决 Three.js 中贴图显示模糊的问题

在 Three.js 应用程序中遇到贴图显示模糊的情况通常是因为纹理过滤设置不当所致。默认情况下，Three.js 使用线性滤波器来处理缩放和平滑化操作，这可能会导致图像看起来不够清晰。

为了提高贴图质量并减少模糊感，可以调整 `texture.minFilter` 和 `texture.magFilter` 属性。推荐的做法是启用各向异性过滤 (anisotropic filtering)，它可以在不显著增加性能开销的情况下提供更好的细节保留能力[^1]：

// 加载纹理之前配置加载器选项
const loader = new THREE.TextureLoader();
loader.setCrossOrigin('anonymous');

let texture;
await new Promise((resolve, reject) => {
    loader.load(
        'path/to/your/image.jpg',
        function(img) {
            img.anisotropy = 16; // 设置最大可能的各向异性级别
            img.minFilter = THREE.LinearMipMapLinearFilter;
            img.magFilter = THREE.NearestFilter;

            texture = img;
            resolve(texture);
        },
        undefined,
        reject
    );
});

此外，在某些场景下还可以考虑禁用 mipmapping 或者手动生成更高质量的 mipmap 链条以进一步改善视觉效果。对于特别重要的材质表面，甚至可以选择预烘焙高分辨率版本作为基础纹理映射到模型上。

通过上述方法能够有效缓解 Three.js 渲染过程中出现的贴图模糊现象，从而获得更加精细逼真的图形表现。