Three.js指定Material如何禁用纹理插值实现像素级精确渲染

你遇到的边缘插值模糊问题是Three.js纹理默认启用线性采样导致的，只需修改纹理的过滤模式为最近邻采样即可实现像素级锐利的边缘效果。

你需要调整纹理加载的逻辑，在纹理加载完成后设置对应参数：

this._groundOverlayMaterial.map = new THREE.TextureLoader().load(
    overlayCtx.canvas.toDataURL('image/png'),
    (texture) => {
        // 放大时使用最近邻采样，禁用插值
        texture.magFilter = THREE.NearestFilter;
        // 缩小时使用最近邻采样，禁用插值
        texture.minFilter = THREE.NearestFilter;
        // 无需多级渐远纹理时可关闭，减少性能消耗、避免异常模糊
        texture.generateMipmaps = false;
        texture.needsUpdate = true;
    }
);
this._groundOverlayMaterial.needsUpdate = true;

优化建议：你可以跳过转DataURL的步骤，直接从Canvas对象生成纹理，性能更高、加载更快：

const texture = new THREE.CanvasTexture(overlayCtx.canvas);
texture.magFilter = THREE.NearestFilter;
texture.minFilter = THREE.NearestFilter;
texture.generateMipmaps = false;
this._groundOverlayMaterial.map = texture;
this._groundOverlayMaterial.needsUpdate = true;

参数说明：

• magFilter：控制纹理被放大渲染时的采样逻辑，默认值为THREE.LinearFilter（线性插值，会平滑像素边缘导致模糊），设置为THREE.NearestFilter后会直接取距离采样点最近的原始像素值，完全保留锐利边缘。
• minFilter：控制纹理被缩小渲染时的采样逻辑，同样设置为最近邻即可保证缩小时边缘依然清晰。
• generateMipmaps：如果你的纹理不会被渲染到远小于原始尺寸的大小，关闭该参数可以减少显存占用，同时避免mipmap层级切换时产生的边缘异常。

内容的提问来源于stack exchange，提问作者Marcel Lorenz