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 struggling with is that the vertexIndex seems to follow a different mapping order than

geometry.vertices[ vertexIndex ]

I have created an example demonstrating this problem: .html

Source: .js

The above code does the following:

• Creates a plane

• Draws a sphere at the location of the plane's vertex of index 1 using a utility dot function:

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

• Modifies the texel at faceVertexUvs[0][0][1] so we can see where texel 1 is

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

You can see in the example page, the sphere is being drawn on the top right of the plane (location of vertex 1), while the texel being modified is on the bottom left of the plane. The indices of the vertices do not line up! Is this a three.js bug, or am I missing something about texels?

I have found that the vertices seem to map like this:

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

However, I am seeing some other unexpected behavior while trying to acplish a related uv mapping task, so I don't know if the mapping is the source of my error.

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 struggling with is that the vertexIndex seems to follow a different mapping order than

geometry.vertices[ vertexIndex ]

I have 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 plane's vertex of index 1 using a utility dot function:

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

• Modifies the texel at faceVertexUvs[0][0][1] so we can see where texel 1 is

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

You can see in the example page, the sphere is being drawn on the top right of the plane (location of vertex 1), while the texel being modified is on the bottom left of the plane. The indices of the vertices do not line up! Is this a three.js bug, or am I missing something about texels?

I have found that the vertices seem to map like this:

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

However, I am seeing some other unexpected behavior while trying to acplish a related uv mapping task, so I don't know if the mapping is the source of my error.

• javascript
• three.js

Share Improve this question Follow asked Jun 25, 2013 at 9:07 Andy RayAndy Ray 32.1k1616 gold badges113113 silver badges148148 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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!