Know Which Part of a Model a User Clicks

I have a shoe model, and a UV unwrap that has some sub-parts of the model on their own island, and some sub-parts touching each other. I’m wondering if there is a way to return which part of a model a user has clicked (or on mobile - touched) when there is only one model in the scene.

The only way I am aware of is to separate each sub-part into its own model, but I’d like to see if there is a way to keep it all as one, because that makes it much easier for me later.

In the image below, I have outlined, in red, most of the sub-parts of the shoe.

Since your model has a nice UV map, I think you can use this to know which part of the model is clicked. Here is how I would do it :

raycaster.intersectObject returns an array of intersection objects containing a face value, wich is an array of the three vertex indices forming the face that was intersected in your geometry.

On your mesh geometry’s uv attribute, use BufferAttribute.getX and getY to know the uv coordinate of one of the three points of the intersected face.

match this uv with a bounding boxes collection that you will prepare according according to your uv mapping. ( uv.u > 0.1 && uv.u < 0.2… )

2 Likes

Thank you for the quick response! That mostly makes sense to me, although, I have never used raycaster or bufferattribute before. Let me take a look and see if I have more questions…

Seems, you’ve got the answer in the pics you’ve provided.
Just have an additional texture, where each subpart has its own unique color. And then, via UV coordinates you get from raycaster, find the the color on the texture, so you’ll know what part you’re clicking. So, you’ll need a table of parts and their colors.
Similar to the principle of GPU picking technique.

2 Likes

@prisoner849 that’s what I thought too originally, but how would you go about getting the color of a texture at a given coordinate ?

1 Like

By multiplying UV’s x and y with width and height of the texture, getting pixel coordinates, then use .getImageData().

2 Likes

Or do it closer to GPU picking, rendering two scenes, one with normal view of the model, another one with that texture of colour indices on the model.