Search code examples
three.jsuv-mapping

How to modify UV coordinates with three.js

I want to modify a JSON model's unwrap (UV coordinates) during runtime in order to move the texture over the surface of the geometry. I found faceVertexUvs in the Geometry class documentation. It contains one array, which is correct. That array contains a lot of elements, which I assume to be the UV coordinates for each vertex. Example code:

var uvs = mesh.geometry.faceVertexUvs[0];
console.log(uvs.length);

Gives me 4232 as output. So far so good. Now I would like to alter the u and v values, but the 4000+ elements of the array are strings ("1" through "4234"). I only found examples showing how to create an unwrap from scratch, in which case people push Vector2 data up into faceVertexUvs. So why am I not seeing Vector2 data in there?

Solution

  • Okay, I solved this one myself, hooray. I was searching for the wrong terms, because three.js makes this pretty simple. Instead of actually altering the unwrap (UV coordinates of the geometry), it is possible to set an offset on the texture itself:

    texture.offset.y += 0.1;

    For this to work with a seamless/tiling texture, we also have to tell three.js that the texture should wrap/repeat:

    texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;

    Source: Tunnel Effect Tutorial

    Well, that was easy!