將圖像設置為 three.js 場景背景使其模糊

Question

我有一張想設置為場景背景的圖像。 我的問題是，當我按照以下方式進行操作時，圖像變得模糊：

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

如果我將其設置為畫布的背景或只是將其作為網格添加到場景中，則問題不在於圖像本身，這很好，但是在我的用例中這不是可接受的解決方案，因為我需要使用 lensflare 和發光效果，但是只有在設置了場景的背景時混合才有效，否則會發生這種情況：

將圖像作為網格添加到場景中也不起作用，因為當鼠標移動時相機會旋轉並且我不希望圖像移動，它應該表現為背景。

模糊和不模糊之間的區別非常明顯。 下面是圖像模糊和不模糊時的一部分。

模糊：

脆皮：

我嘗試多次設置此背景（作為場景背景、相機背景、CSS 中的 canvas 背景），希望在場景背景之上，但事實並非如此。 我還查看了 scene.background 的屬性，但沒有引起我的注意（嘗試將各向異性設置為高值）。

有沒有辦法阻止場景背景變得模糊？

Answer 1

Three.js 通常會調整它們的圖像大小，使它們是 2 的冪（256、512、1024 等）以允許 mipmapping。 由於您上傳的是 857 像素高的圖像，它會被下采樣到最近的 512 像素高的 POT。 這就是您看到分辨率下降的原因。 有兩種方法可以解決您的問題：

1. 上傳一個 POT 的 PNG。 給定您的源文件，您應該能夠導出 2048x1024 圖像。

2. 通過將紋理的縮小過濾器更改為不使用 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