纹理模糊远离相机Three.js

Question

我有一个三j场景，我的相机是这样的：

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轴上很远，它由穿着质量好的纹理的矩形组成。

问题是它非常靠近相机模糊（正如你在图片中看到的那样）。这不正常，它在场景中体现了廉价的虚幻图形。

我怎样才能解决这个问题？

提前致谢！

Answer 1

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

修改Texture.minFilter以更改纹理像素覆盖少于一个像素时的纹理采样方式。修改Texture.magFilter以执行相反操作：更改纹理像素覆盖多个像素时纹理的采样方式。

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

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

Answer 2

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

Answer 3

可能你处于纹理分辨率低于所需的情况。

在这种情况下，您有2个可能性。来自three.js doc：

.magFilter

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

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