Drag and drop with snapping objects


I’m trying to build a configurator for a room where user can move certain objects and link (join/unite) them. For instance, two bars that are randomly placed on the stage (X and Z axis only) that could be dragged and when Bar 1 is near Bar 2, the top of Bar 1 will be snapped to the top of the object Bar 2, like a magnet (when snapping the objects should move and rotate until the dragged object match the other object - no animation required).

Plus, once the objects are “connected”, everytime I try to move one of them, they should move both as if they were only one.

The objects are being imported through GLTFLoader (glft files).

I’ve been searching for something like this for days and I haven’t found anything. Any help?


These are a number of wishes.

Just a few things you might be able to pick up there.

see there
Look after RaycasterBuildAndroid

1 Like

Hi @hofk, thanks for your answer. Indeed I didn’t know the existence of such collection.
But, I don’t know how the example you said to take a look can help me.


You would want to create contact points at each of the ends of the pieces; they could simply be empty objects that signify the positions of where the two pieces should meet. Then when you are dragging the pieces, you could check it the distance between the two points (in world space) is within some small unit amount. If it is, you’d initiate ‘snapping’.

One way to do so would be to create a parent empty object to act as a group, add both of your parts to that object and position them so that they’re connected. Then you’d want to reassign however you’re doing dragging to drag the parent object instead of the individual objects. This could be kind of complex and you’d have a lot of work to do when you, say, want to disconnect pieces, breaking apart the parent, etc etc.

Another approach would be to save the mapping between the objects in some data structure (like a map) to signify the connections (A connected to B and B to A) and whenever you move A you would run through the list of connected parts and update their transformation by calculating the correct transformation given the transformation of A and the resultant world space contact point. This requires some matrix math but there’s no real getting around it.

Hope that helps a bit.


The example only shows how to move the objects towards each other. In addition, all positions are saved in the local memory of the browser, so that the current state is visible after reopening the page.

As @dyarosla writes, there is still much work to be done. For the construction of the android one could do the same, a good idea. But I am busy with other things at three.js at the moment.

1 Like