将图像设置为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 像素高。这就是您看到分辨率下降的原因。有两种方法可以解决您的问题：

上传一个 POT 的 PNG。鉴于您的源文件，您应该能够导出 2048x1024 图像。

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

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

bgTexture.minFilter = THREE.LinearFilter;

scene.background = bgTexture;

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

Answer 2

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

texture.magFilter = NearestFilter

请注意，它是magFilter，不是minFilter