将图像设置为 Three.js 场景背景使其变得模糊

Question

我想将一张图像设置为场景的背景。我的问题是，当我按照以下方式执行操作时，图像变得模糊：

textureLoader.load("images/background/space.png", function(t) {
  scene.background = t;
});

问题不是图像本身，如果我将其设置为画布的背景或只是将其作为网格添加到场景中，那很好，但是在我的用例中这不是可接受的解决方案，因为我需要使用 Lensflare 和发光效果，但只有设置了场景背景时混合才有效，否则会发生这种情况：

将图像作为网格添加到场景中也不起作用，因为移动鼠标时相机会旋转，并且我不希望图像移动，它应该充当背景。

模糊和不模糊之间的区别确实很明显。下面是模糊和不模糊时图像的一部分。

模糊：

脆皮：

我尝试多次设置此背景（如场景背景、相机背景、CSS 的画布背景），希望其中一个位于场景背景之上，但事实并非如此。我还查看了 scene.background 的属性，但没有什么引起我的注意（尝试将各向异性设置为高值）。

有没有办法阻止场景背景变得模糊？

Answer 1

Three.js 通常会调整图像大小，使其成为 2 的幂（256、512、1024 等），以允许进行 mipmapping。由于您上传的图像高度为 857 像素，因此它将被下采样到最近的 POT（高度为 512 像素）。这就是您看到分辨率下降的原因。有两种方法可以解决您的问题：

1. 上传一个 POT 的 PNG。根据您的源文件，您应该能够导出 2048x1024 图像。

2. 通过将纹理的缩小过滤器更改为不使用 mipmap 的内容来禁用 mipmap，例如LinearFilter或NearestFilter：

var bgTexture = new THREE.TextureLoader().load("images/background/space.png");
bgTexture.minFilter = THREE.LinearFilter;
scene.background = bgTexture;

禁用 mipmap 的缺点是，如果纹理太小，您可能会看到锯齿，但如果它占据整个背景，则应该没问题。您可以在“缩小过滤器”部分的纹理常量页面中阅读有关缩小过滤器选项的更多信息。