Three.js - Geometry.faceVertexUvs[0][0][index] Is Not The Same As Geometry.vertices[index]

As far as I understand it, you can access the uv coords ('texels') of each vertex of a mesh using: geometry.faceVertexUvs[ materialIndex ][ faceIndex ][ vertexIndex ] What I am st

Solution 1:

I don't know if there is a better way, but the mapping appears to work as such:

geometry.faceVertexUvs[ 0 ][ faceIndex ][ vertexIndex ]

vertexIndex corresponds to the vertex index of the face, not the geometry vertex array. While presented as a number from 0-3 ( for a quad ), the actual face defines the values as a-d (from Face4 docs):

Face4( a, b, c, d ... )

> geometry.faces[0] // assuming faceIndex is 0
THREE.Face4 {a: 0, b: 2, c: 3, d: 1, normal: THREE.Vector3…}

Look at that, there's our mapping!

So, to map between them, we need to find the face at that index, and map 0 to a, 1 to b, etc, and then look that up in the geometry.vertices array. Here's a silly but functional way:

geometry.vertices[
    geometry.faces[faceIndex][ String.fromCharCode(97 + vertexIndex) ]
];

Where vertexIndex is that provided by faceVertexUvs[0][faceIndex][vertexIndex]. The fromCharCode maps a to 0 and so on. Now we have the vertex (and it's position) for each uv texel! Woooo!