Texture Distortion and Swirling Artifacts in Three.js

Based on your screenshot and settings, the swirling artifacts you're experiencing are likely related to texture filtering and mipmapping issues. Here are some potential causes and solutions:

Possible Causes

1. Nearest Filtering with Anisotropy: You're using THREE.NearestFilter for both magFilter and minFilter while also setting anisotropy. This combination can cause issues as nearest filtering doesn't work well with anisotropic filtering.

2. Mipmapping Disabled: You have generateMipMap: false which can cause aliasing at different viewing distances.

3. UV Mapping Issues: The swirling pattern could indicate problems with the UV coordinates in your model.

Suggested Solutions

1. Change Filtering Method:

   JAVASCRIPTCopied
   texture.magFilter = THREE.LinearFilter;
   texture.minFilter = THREE.LinearMipmapLinearFilter;
   texture.generateMipmaps = true;

2. Adjust Anisotropy:
   If you want to keep nearest filtering for a pixelated look, try removing anisotropy:

   JAVASCRIPTCopied
   texture.anisotropy = 1; // Disable anisotropic filtering

   Or if you want smoother textures at angles:

   JAVASCRIPTCopied
   texture.minFilter = THREE.LinearMipmapLinearFilter;
   texture.generateMipmaps = true;
   texture.anisotropy = gl.capabilities.getMaxAnisotropy();

3. Check UV Mapping:
   Inspect the UV mapping of your model. The swirling pattern could indicate stretched or improperly mapped UVs.

4. Camera Settings:
   Your camera near/far settings (1/1000) are reasonable, but ensure your camera isn't positioned too close to surfaces which can exaggerate texture issues.

5. Fix Typo:
   There's a typo in your settings: genrateMipMap should be generateMipmaps.

Try these adjustments and see if they resolve the texture distortion issues in your scene.