Three.js Multiple UV maps on a single object

Question

I am trying to figure out how to use two different textures on the front and back of a box. Whenever I scale my box (ExtrudeGeometry), the UV maps do not seem to update. Therefore I am defining my own UV maps for the front and back of the box.

To define the front UV map I use:

geometry.faceVertexUvs[0]

which works accordingly.
For the back UV map I use:

geometry.faceVertexUvs[1];

However I am not able to access this 'second' layer UV map.

So my question is:

1. Is it possible to update the UV maps accordingly to the scale of the object?
2. Is it possible to access a 'second' layer UV map within a material?

I created an example here: jsfiddle.

I created three different boxes, with 3 different scales. From left to right: 0.01 x 2.97 x 2.1, 0.01 x 1 x 1 and 0.01 x 0.297 x 0.21. On the most left box, the textures are only covering a small portion of the box. The middle box has correct texturing. The right box has the updated uv map (otherwise only a small portion of the texture would show up).
(I am required to use the small scale on the box!)

I hope someone can help me out!

Three.js 84

Answer 1

You can define attribute vec2 uv2 in your vertex shader, and then access it as normal.

precision highp int;
precision highp float;

uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;

attribute vec2 uv;
attribute vec2 uv2;
attribute vec3 normal;
attribute vec3 position;

void main() {
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}