相机远离时纹理模糊 Three.js

Question

我有一个threejs场景，我的相机设置如下：

var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH  / SCREEN_HEIGHT , NEAR = 0.1, FAR = 8000;

camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);

我创建材料的方式如下：

var floorTexture = new THREE.ImageUtils.loadTexture( 'Images/floor62.jpg' );
floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping; 
floorTexture.repeat.set( 3, 105 );
var floorMaterial = new THREE.MeshBasicMaterial( { map: floorTexture, side: THREE.DoubleSide } );
                    var floorGeometry = new THREE.PlaneGeometry(250, 10500 );

然后我创建了你在照片中看到的道路。它沿着z轴远去，由带有高质量纹理的矩形构成。

问题是它在靠近相机时模糊不清（正如您在图片中所看到的）。这并不正常，并且使场景中的图形看起来不真实。

如何解决这个问题？

提前感谢您！

- user1866818

---

你可能不需要 side: THREE.DoubleSide。我猜你不会走在路下面。 - gaitat

那确实是对的，但问题仍然存在。 - user1866818

Answer 1

当涉及到各向异性过滤问题时，有两个选择：完全修改算法或（最可能的）提高采样率。

修改Texture.minFilter以更改纹理在像素覆盖不到一个像素时如何采样。修改Texture.magFilter以相反的方式进行更改：更改当像素覆盖超过一个像素时如何采样纹理。

要提高采样率，请修改Texture.anisotropy。

在这两种情况下，如果您在最初加载场景后修改纹理，请记得在此之后设置Texture.needsUpdate = true;。

- David Lucid

Answer 2

请使用 floorTexture.generateMipmaps = false;。默认设置是true，这种情况下，渲染器使用低分辨率的纹理来呈现远离相机的多边形。Mipmaps通常是好事情。在图形卡上使用更少的内存。

- gaitat

---

我使用了这行代码，但我的网格消失了！我不知道为什么。 - user1866818

你能创建一个 JSFiddle 吗？ - gaitat

Answer 3

也许您的情况是纹理的分辨率比所需的低。在这种情况下，您有两种选择。从three.js文档中得知:

.magFilter 当一个texel覆盖多个像素时，如何对纹理进行采样。 默认值为THREE.LinearFilter，它取四个最接近的texels并在它们之间进行双线性插值。另一个选项是THREE.NearestFilter，它使用最接近texel的值。

因此，您可以尝试将magFilter设置为Nearest，其中保留了纹理的“像素化”。

- vals

---

纹理质量很好。我尝试按照您说的使用magFilter，但没有改善。 - user1866818

Answer 4

你可以将这个Texture.anisotropy设置为一个数字，详细信息可以参考https://threejs.org/docs/#api/zh/textures/Texture.anisotropy。我来自中国，希望能帮到你 ^_^

- xu chenn