Multiple UVs/textures for single mesh in THREE.js

Question

I have an OBJ that uses four textures. The UVs defined in the file range from (0, 0) to (2, 2), such that (0.5, 0.5) refers to a coordinate in the first texture, (0.5, 1.5) is a UV coordinate in the second texture, (1.5, 0.5) is a coordinate in the third texture, and (1.5, 1.5) is a coordinate in the last texture.

I already have the correct three.js geometry or object. However, I now need to be able to apply the correct texture maps to these objects.

In code:

I have a THREE.Mesh with the correct geometry (with UVs coords such that U = [0, 2], V = [0, 2]) and a dummy placeholder material. I currently load a single texture like so:

var texture = new THREE.TextureLoader().load('tex_u1_v1.png', function() {
    object.material.map = texture;
    object.material.map.needsUpdate = true;
});

As expected, one fourth of the mesh is textured correctly. I have three more texture files, tex_u1_v2.png, tex_u2_v1.png, and tex_u2_v2.png. I want to be able to apply these textures as well to object (the THREE.js mesh), such that there is a texture for every valid UV in the mesh.

However, I do not know how to add multiple materials to object after it has been created. Moreover, I do not know how to specify to the mesh that tex_u1_v2.png, for example, should be used for UVs in range (U = [0, 2], V = [1, 2]).

Answer 1

The standard materials in Three will only accept a single texture object for the various map-parameters (and the texture objects will only hold a single image), so in order to use multiple textures on your object you will have to use multiple materials or create your own multi-texture-material. If you have experience with shader programming you will probably get the best performance with the latter approach (assuming you have enough video memory for your large textures) as you can draw the entire mesh in a single draw call and without having to load new shaders or textures.

To create your own shader you can use the ShaderMaterial or RawShaderMaterial, give it one texture uniform for every texture you will need (four in your case) and then in the shader code pick the correct one to sample depending on the coordinates.

To make an object use more than one material you can set the material property to an array of materials (either during creation with the constructor parameter, or just replace it manually at a later stage).

const myMaterials = [tex1Material, tex2Material, tex3Material, tex4Material];
const myMesh = new THREE.Mesh(myGeometry, myMaterials);
//Or:
myMesh.materials = myMaterials;

Then, to make the different parts of your mesh use the appropriate materials you will have to create groups if it is a BufferGeometry; or set the materialIndex of the faces if you are using a Geometry. The material index (both in the group and the face) is the index of the material in the mesh.material array shown above.

Now that you have different parts of the mesh with different materials, you can just give each material their own textures.

• The probably easiest way to get the correct uv coordinates for the textures would be to just keep each part in the [0,1] interval. Since each part of the mesh uses a unique material you don't have to worry about overlapping coordinates.

If you don't want to modify your already existing coordinates there are two alternative approaches:

• Set the texture wrapping to THREE.RepeatWrapping:

  myTexture.wrapS = THREE.RepeatWrapping;
  myTexture.wrapT = THREE.RepeatWrapping;
  

  This will make the texture repeat beyond the standard [0-1] uv interval.

• The other way is to use the offset property of the texture to push it back into the [0-1] interval. For a texture to be placed in the u[0,1], v[1,2] interval you would set the offset the v-coordinate by -1:

  myTexture.offset = new THREE.Vector2(0, -1);
  

Here is a link to a jsfiddle that demonstrate these methods: https://jsfiddle.net/xfehvmb4/

Answer 2

I have a THREE.Mesh with the correct geometry (with UVs coords such that U = [0, 2], V = [0, 2])

Your understanding of "correct" in this case, may be incorrect. Lets consider a tetrahedron, and map it, yielding 4 triangles. Let's place each triangle into it's own quadrant in UV space. The four quadrants would be:

02--12--22
 | B | C |
01--11--21
 | A | D |
00--10--20

I'm not entirely sure how to convey this best, but the lookup for the texture is always done in quad A (0011) if that makes sense. As soon as a value goes below 0 or above 1 it just wraps around and looks up the same space. So, all 4 triangles here (ABCD), are actually overlapping. There exists no texture past this range. You either clamp to the edge pixel, or you wrap around (or mirror possibly).

There might be a good reason to have UVs outside of this range, but it doesn't make much sense in your case. I imagine you do not have any triangles going across these boundaries, so you might as well just have 4 different meshes, with their own UVs in 0,1 domain, using their own textures.

It can also be achieved with the other answer, by using an array of materials and setting groups. This is all you need. When it renders the mesh whos uvs are all in 1,1,2,2, it would be exactly the same as if they were in 0,0,1,1.

Answer 3

@Jave's answer looks pretty good to me, but if you want to instead go the ShaderMaterial route, here's how you'd do it:

// Make the material
var material = new new THREE.ShaderMaterial({
      uniforms: {
        u_tex1: {value: null},
        u_tex2: {value: null},
        u_tex3: {value: null},
        u_tex4: {value: null},
      },
      vertexShader: `
        varying vec2 v_uv;
        varying float v_textureIndex;
        void main() {
          // This maps the uvs you mentioned to [0, 1, 2, 3]
          v_textureIndex = step(0.5, uv.x) + step(0.5, uv.y) * 2.0;
          v_uv = uv;
          gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }
      `,
      fragmentShader: `
        varying vec2 v_uv;
        varying float v_textureIndex;
        uniform sampler2D u_tex1;
        uniform sampler2D u_tex2;
        uniform sampler2D u_tex3;
        uniform sampler2D u_tex4;
        void main() {
          vec4 color = texture2D(u_tex1, v_uv);
          // These lines make sure you get the right texture
          color = mix(color, texture2D(u_tex2, v_uv), step(0.5, v_textureIndex));
          color = mix(color, texture2D(u_tex3, v_uv), step(1.5, v_textureIndex));
          color = mix(color, texture2D(u_tex4, v_uv), step(2.5, v_textureIndex));
          gl_FragColor = color;
        }
      `,
    });

var texture1 = new THREE.TextureLoader().load('tex_u1_v1.png', function() { material.uniforms.u_tex1.value = texture1 });
var texture2 = new THREE.TextureLoader().load('tex_u2_v1.png', function() { material.uniforms.u_tex2.value = texture2 });
var texture3 = new THREE.TextureLoader().load('tex_u1_v2.png', function() { material.uniforms.u_tex3.value = texture3 });
var texture4 = new THREE.TextureLoader().load('tex_u2_v2.png', function() { material.uniforms.u_tex4.value = texture4 });

This is slightly inefficient, as you are doing 4 texture samples, but is very flexible.

Answer 4

Also it's possible combine different types of textures for one mash, for example

• bump map
• diffuse
• normal map ...etc

I downloaded @types/three and it helped me a lot to understand properties of MeshPhongMaterial, which instantiated my mesh material. There are props bumpMap, map, normalMap and other. Also there is a color property which can change texture's color.