Changing Textures in Three.js

For allowing users to switch between different fabric textures in your Three.js application, the more efficient approach would be to simply change the texture maps rather than creating entirely new mesh assets.

Recommended Approach

You should change the texture maps (PNG/JPEG) on your existing mesh. This is:

1. More efficient - Avoids duplicating geometry data
2. Easier to implement - Requires less code and memory
3. Better for performance - Especially important for web applications

Implementation Example

Assuming you have a MeshStandardMaterial on your clothing object, you can switch textures like this:

JAVASCRIPTCopied
// Load your textures
const textureLoader = new THREE.TextureLoader();

// Load fabric textures
const fabric1Texture = textureLoader.load('fabric1_color.jpg');
const fabric1NormalMap = textureLoader.load('fabric1_normal.jpg');
const fabric1RoughnessMap = textureLoader.load('fabric1_roughness.jpg');
const fabric1AOMap = textureLoader.load('fabric1_ao.jpg');

const fabric2Texture = textureLoader.load('fabric2_color.jpg');
const fabric2NormalMap = textureLoader.load('fabric2_normal.jpg');
const fabric2RoughnessMap = textureLoader.load('fabric2_roughness.jpg');
const fabric2AOMap = textureLoader.load('fabric2_ao.jpg');

// Function to switch fabrics
function switchToFabric(fabricNumber) {
  if (fabricNumber === 1) {
    clothingMaterial.map = fabric1Texture;
    clothingMaterial.normalMap = fabric1NormalMap;
    clothingMaterial.roughnessMap = fabric1RoughnessMap;
    clothingMaterial.aoMap = fabric1AOMap;
  } else if (fabricNumber === 2) {
    clothingMaterial.map = fabric2Texture;
    clothingMaterial.normalMap = fabric2NormalMap;
    clothingMaterial.roughnessMap = fabric2RoughnessMap;
    clothingMaterial.aoMap = fabric2AOMap;
  }
  
  // Important: tell Three.js that the material needs to be updated
  clothingMaterial.needsUpdate = true;
}

Considerations

• Make sure all your fabric textures have the same dimensions to avoid unexpected scaling issues
• If the tiling settings need to be different between fabrics, you can adjust those when switching:

  JAVASCRIPTCopied
  fabric2Texture.repeat.set(2, 2); // Different tiling for fabric 2

• If the fabrics have significantly different physical properties, you might also need to adjust other material properties like:

  JAVASCRIPTCopied
  clothingMaterial.roughness = 0.7; // Different base roughness for fabric 2
  clothingMaterial.metalness = 0.1; // Different metalness for fabric 2

This approach gives you the flexibility to change textures dynamically while maintaining good performance.