Working with Multiple UV Sets in Three.js v156

You're correct that there have been changes to how Three.js handles UV sets in recent versions. In the newer versions (v151+), the shader system has been refactored to use named UV variables like vAoMapUv instead of the previous vUv2 approach.

Understanding the Changes

The documentation confirms that the aoMap requires a second set of UV coordinates, but the implementation has changed. Now, instead of directly using vUv2, the system uses a more flexible approach with UV channels.

Solution for Blending Maps with Different UV Sets

To blend two maps using different UV sets in Three.js v156, you'll need to:

1. Set up your material with the appropriate UV channel settings
2. Create a custom shader material if needed

Here's how you can approach this:

JAVASCRIPTCopied
// Create your material
const material = new THREE.MeshStandardMaterial({
  map: textureForFirstUVSet,
  aoMap: textureForSecondUVSet,
  aoMapIntensity: 1.0
});

// Set the aoMap to use the second UV set (channel 1)
material.aoMapUvChannel = 1;

// Make sure your geometry has two UV sets
// For example, if you're using BufferGeometry:
geometry.setAttribute('uv', new THREE.BufferAttribute(firstUVSet, 2));
geometry.setAttribute('uv2', new THREE.BufferAttribute(secondUVSet, 2));

If you need more control over the blending process, you might need to create a custom shader material:

JAVASCRIPTCopied
const customMaterial = new THREE.ShaderMaterial({
  uniforms: {
    map1: { value: textureForFirstUVSet },
    map2: { value: textureForSecondUVSet },
    blendFactor: { value: 0.5 }
  },
  vertexShader: `
    varying vec2 vUv;
    varying vec2 vUv2;
    
    void main() {
      vUv = uv;
      vUv2 = uv2;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    uniform sampler2D map1;
    uniform sampler2D map2;
    uniform float blendFactor;
    
    varying vec2 vUv;
    varying vec2 vUv2;
    
    void main() {
      vec4 color1 = texture2D(map1, vUv);
      vec4 color2 = texture2D(map2, vUv2);
      gl_FragColor = mix(color1, color2, blendFactor);
    }
  `
});

Remember that when using a custom shader material, you'll need to handle all the lighting and material properties yourself if you need them, or you could extend one of Three.js's built-in materials using onBeforeCompile to modify just the parts you need.