将图像设置为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像素高的图像，因此它将被下采样到最近的512像素POT。这就是为什么您看到分辨率下降的原因。有两种方法可以解决您的问题：

1. 上传作为POT的PNG。给定您的源文件，您应该能够导出2048x1024的图像。

2. 通过将纹理的minification filter更改为不使用mipmap的东西（例如LinearFilter或NearestFilter）来禁用mipmapping：

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

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

Answer 2

在我的确切情况下，我有像素化的图像，并且想要放大很多，同时根本没有任何模糊。能够做到：

texture.magFilter = NearestFilter

注意是magFilter，不是minFilter