Get UVs from mesh at a give Vector3 without using a raycaster

I’ll let more experienced folks to point out the essential details when it comes to Three.js (since I didn’t work with the UVs as a BufferAttribute just yet), so I’ll try to provide some additional information to what @rrrr_rrrr said, regarding the cartesian / barycentric / uv coordinates. See here, here, here, here or here to get an idea about all that.

As for how the uvs are structured in Three.js, they are basically an array of [0…1] interval values, where a pair of such values represent the (u, v) coordinates for the vertices - at least that’s how I understood them to be. For example, the top left vertex of a plane would have the uvs of (0, 0) as the top left corner, the bottom right vertex of it would have the uvs of (1, 1) as the bottom right corner. To get or set them, see the examples here or here.

When it comes to faces, their index and a Vector3 point on such a face, to my (still not at an expert level) knowledge, a face is outlined by the 3 vertices (and their x, y, z coordinates) that represent the corners of that face’s triangle and identified also by that face’s normal (i.e. the direction of the face). So, at a rudimentary level, I guess that iterating through sets of 3 vertices and their (x, y, z) position and then checking if the given point belongs to the triangle made by those 3 vertices using a method similar to Triangle.containsPoint() - or, even better, directly get the uv of that point in the triangle via Triangle.getUV - should get you closer to your objective. Bear in mind that the Three.js Triangle also has some potentially useful methods related to what @rrrr_rrrr said, i.e. Triangle.getBarycoord, so maybe you can make use of those as well.

2 Likes