Textures blur far from camera Three.js

Question

I have a threejs scene, with my camera like this:

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

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

and i create the material like this:

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 );

and then I create the road you see in the pic. it goes far in z-axis and it is made of rectangles dressed with good-quality textures.

The problem is it blurs very close to the camera (as you can see in the pic). This is not normal and it gives a taste of cheap unreal graphics in the scene.

How can I fix this?

thanks in advance!

Answer 1

When it comes to issues with anisotropic filtering, have two options: modify the algorithm entirely or (most likely) turn up the sampling rate.

Modify Texture.minFilter to change how a texture is sampled when a texel covers less than one pixel. Modify Texture.magFilter to do the opposite: change how the texture is sampled when a texel covers more than one pixel.

To turn up the sampling rate, modify Texture.anisotropy.

In both cases, if you are modifying the texture after you initially load your scene, remember to set Texture.needsUpdate = true; afterwards.

Answer 2

Use floorTexture.generateMipmaps = false;. The default setting is true in which case the renderer uses lower resolution textures for polygons far from the camera. Mipmaps are generally a good thing. Less memory on the graphics card.