Strange patterns on texture

[ddanny]

I am using a textured PlaneGeometry for displaying some 2D images on some planes. It seems to work fine excepting the fact that I get some strange patterns when zoomed out.
They look something like this: http://www.achartengine.org/img/img1.png
However, the original image looks like this when zoomed in: http://www.achartengine.org/img/img2.png

Please let me know if there is anything I do wrong or there is anything I can do to fix this. The code below explains better what I do:

var texture = new THREE.ImageUtils.loadTexture(image);
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;
material = new THREE.MeshBasicMaterial({ map : texture });
var geometry = new THREE.PlaneGeometry(width, height);
mesh = new THREE.Mesh(geometry, material);
mesh.doubleSided = true;
parent.add(mesh);

In the code above, the plane geometry width is about 20000 and height about 4000, the texture image is 2000*2000.

Thanks a lot,

Dan

[mrdoob]

Also called Moiré pattern :)

Try making the texture 2048x2048 (power-of-2) and using this flag:

texture.minFilter = THREE.LinearMipMapLinearFilter;

[ddanny]

Excellent, thanks!
Do you have any suggestion on the magFilter? I think the requirement for us is that when zooming in, every pixel matters, so maybe no filter at all would be better?

[mrdoob]

texture.magFilter = THREE.NearestFilter;