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).
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.
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.
something like that.
when I want to implement snaping two points with 2 Meshs,
I will do like this in babylon.js:
var ray = new BABYLON.Ray(meshA.getAbsolutePosition(), vectorOnMeshA.subtract(meshA.getAbsolutePosition()).normalize(), 100); // ray length is 100
var hit = ray.intersectsMesh(meshB); // check hit and get hit infomation
if (hit) {
var snapPoint = hit.pickedPoint; // this is meshA's point snap to precise location of surface of meshB
var offset = vectorOnMeshA.subtract(meshA.getAbsolutePosition());
meshA.position =snapPoint.subtract(offset); // snap to the point
}
