When working in three.js, it's important to remember that geometry.faceVertexUvs[0][0][index] does not equate to geometry.vertices

Question

When working in three.js, it's important to remember that geometry.faceVertexUvs[0][0][index] does not equate to geometry.vertices

From what I gather, the uv coords ("texels") of each vertex in a mesh can be accessed using:

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

The issue I'm facing is that the vertexIndex seems to have a different mapping order compared to

geometry.vertices[ vertexIndex ]

An example showcasing this problem has been created:

Source:

The provided code carries out the following actions:

Generates a plane
Displays a sphere at the position of the plane's vertex with index 1 using a utility function called dot:
```
dot( floor.localToWorld( floor.geometry.vertices[1].clone() ) );
```
Alters the texel at faceVertexUvs[0][0][1] to visualize the location of texel 1
```
floor.geometry.faceVertexUvs[0][0][1].add( new THREE.Vector2( 0.4, 0 ) );
```

In the example page, it can be observed that the sphere is drawn on the top right of the plane (vertex 1), while the texel being manipulated is situated on the bottom left of the plane. The vertex indices do not align! Is this an issue with three.js, or am I overlooking something regarding texels?

I've noticed that the vertices seem to correspond as follows:

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

However, some unexpected behavior arises when attempting a related uv mapping task, which leads me to question if the mapping is indeed the root cause of my error.

javascript three.js

Answer 1

Answer №1

There may be other methods, but it seems the mapping is functioning like this:

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

vertexIndex corresponds to the vertex index of the face, rather than the geometry vertex array. Although it's portrayed as a number from 0-3 (for a quad), the face itself labels them as a-d (referencing Face4 docs):

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

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

Voila, there's our connection!

To establish the correspondence between them, we should locate the face at that index, match 0 with a, 1 with b, and so forth, then refer back to the geometry.vertices array. An unorthodox yet effective method could look something like:

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

Here, the vertexIndex comes from

faceVertexUvs[0][faceIndex][vertexIndex]

. The fromCharCode function maps a to 0 and similar matches. Thus, we obtain each uv texel's corresponding vertex (including its position)! Hooray!

Answer 2

There may be other methods, but it seems the mapping is functioning like this:

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

vertexIndex corresponds to the vertex index of the face, rather than the geometry vertex array. Although it's portrayed as a number from 0-3 (for a quad), the face itself labels them as a-d (referencing Face4 docs):

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

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

Voila, there's our connection!

To establish the correspondence between them, we should locate the face at that index, match 0 with a, 1 with b, and so forth, then refer back to the geometry.vertices array. An unorthodox yet effective method could look something like:

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

Here, the vertexIndex comes from

faceVertexUvs[0][faceIndex][vertexIndex]

. The fromCharCode function maps a to 0 and similar matches. Thus, we obtain each uv texel's corresponding vertex (including its position)! Hooray!

When working in three.js, it's important to remember that geometry.faceVertexUvs[0][0][index] does not equate to geometry.vertices

Answer №1

Similar questions

Execute a function within useEffect continuously until the contract is fully loaded

Hiding Certain Words on a Website

An unexpected problem with text redirection that should not be happening

Regular expressions work when used on the internet, but they don't seem to

Using Vue: Save user information in the Vuex store prior to registration

Tips for restricting access to specific routes in VueJS using Store state

What is the best way to link objectID, name, phone, and other fields from one collection(schema) to a different one in MongoDB

PlateJS: Transforming HTML into data

There was an uncaught error in AngularJS stating that the URL in the HTTP request configuration must be a string

Tips for executing flushall just once across various clusters with Node.js and Redis

Changing selections in jQuery may not work properly on certain mobile and IE browsers

Skip ahead button for fast forwarding html5 video

Efficiently refresh several DIV elements with a single JSON request

ajax is not functioning properly on scrolling div

Having trouble with WordPress jQuery Click function. Would greatly appreciate some assistance :)

Is the functionality of defineProperty for elements malfunctioning on iOS6?

Issues with MC-Cordova-Plugin on Ionic and Angular Setup

What is the best way to incorporate an AppBar featuring a Back to Top button from Material UI for React into my application?

Securing nested routes in NextJs with authentication

Turn off interpolation during the scaling of a <canvas> tag