Shape with different clickable parts


I’m completely new to Three.js so I’m sure you’ll redirect me to documentation or other topics dealing with my (pretty simple) question, but I still didn’t find clear answer on my own. Thanks in advance for your help.

I want to create different shapes (a square, a triangle, a rectangle etc…) that I can drag and drop on my scene. I already achieved that with THREE.shape() and DragControls.

Now what I want is when you click on the “edges” (or on the “external” part) of those shapes, instead of drag & drop it rotates the shape.

For example with the rectangle bellow, clicking on the green part will let you drag & drop it, wherease clicking on the yellow part will let you rotate it.

So basically what I want is to create shapes with different parts (an “inside” and an “outside” part) that trigger different actions when clicking on it.


You need Raycaster for this.

See from the Collection of examples from

modify Geo



If the parts of your figure are defined by a texture, you can use the uv coordinates.

See Advanced, Raycast onto 3D mesh to get 2D position on texture

From the docs:

An array of intersections is returned…

[ { distance, point, face, faceIndex, object }, ... ]

distance – distance between the origin of the ray and the intersection
point – point of intersection, in world coordinates
face – intersected face
faceIndex – index of the intersected face
object – the intersected object
uv - U,V coordinates at point of intersection
uv2 - Second set of U,V coordinates at point of intersection
instanceId – The index number of the instance where the ray intersects the InstancedMesh

1 Like

Thanks for your quick answer @hofk,
I’ll check the doc you shared and let you know if I manage to do my stuff.

For those who may be interested, this is how I solved it:

Basically what I did was:

  • Create a 3D shape (a cube)
  • Create a 2D smaller shape (a plane)
  • Place the plane on top of the cube
  • Group the plane and cube together

Then using Raycaster I can detect if a click is made on the plane or on the cube and trigger a drag/drop or a rotation of the group accordingly.

It works quite well, I just need to adjust some offset issues depending on where you are clicking on the objects. (DragControls would be useful for that but I didn’t manage to use it properly in this context yet. Indeed, I need a click on an object to trigger a drag/drop on another object + enable/disable DragControls depending on where you are clicking).

Anyway, thanks again @hofk, don’t hesitate if you have any comment on what I did so far.