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.
[ { 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
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.
