Three.js - geometry.faceVertexUvs [0] [0] [index] is not the same as geometry.vertices [index]

Question

As far as I understand, you can access the uv-coordinates ("texels") of each vertex of the grid using:

geometry.faceVertexUvs[ materialIndex ][ faceIndex ][ vertexIndex ] 

What I'm vertexIndex that vertexIndex seems to follow a different display order than

 geometry.vertices[ vertexIndex ] 

I created an example demonstrating this problem: http://andrewray.me/stuff/test-uv2.html

Source : http://andrewray.me/stuff/uv2.js

The above code does the following:

• Creates a plane

• Draws a sphere at the location of the flat vertex of index 1 using the dot utility:

  dot( floor.localToWorld( floor.geometry.vertices[1].clone() ) );

• Changes the texel in faceVertexUvs[0][0][1] so that we can see where texel 1 is

  floor.geometry.faceVertexUvs[0][0][1].add( new THREE.Vector2( 0.4, 0 ) );

You can see on the example page, the sphere is drawn in the upper right corner of the plane (vertex location 1), and the texel in the lower left corner of the plane. Vertex indices do not line up! Is this a three.js bug, or am I missing something about texels?

I found that the vertices seem the same:

 texel index | vertex index 0 | 3 1 | 1 2 | 0 3 | 2 

However, I see other unexpected behavior when I try to complete the related uv mapping task, so I don't know if matching is the source of my error.

Answer 1

I don't know if there is a better way, but it looks like the mapping works as such:

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

vertexIndex corresponds to the vertex index of the face, and not to the array of vertices of the geometry. While displayed as a number from 0 to 3 (for an ATV), the actual face defines the values ​​as an announcement (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 this, our mapping!

So, to compare them with each other, we need to find the face in this index and match 0 with a, from 1 to b, etc., and then look at it in the geometry.vertices array. Here's a dumb but functional way:

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

Where vertexIndex matches faceVertexUvs[0][faceIndex][vertexIndex] . fromCharCode maps a to 0 and so on. Now we have a vertex (and its position) for each uv texel! Woooo!