I'm working on a simple in-browser 3D model constructor using THREE.js. The user picks a plane body, and adds wings, cockpit, tail etc of their choice, choosing from multiple options. I need to be able to define relationships between many bodies and many add-ons, and of course I don't want to manually have to define the position/rotation of each combination of parts. Therefore, I want to be able to define a set of 'snap points' on the body, places where certain components may be inserted, and to define a matching set of points on the add-on parts, basically matching the two in software to position the add-ons correctly.

I though of defining a triangle of 3 points, as that would lock in all 3 degrees of freedom. If I make the order important, it will even prevent the object from "flipping" across the plane defined by the three points. Here's an illustration: before after

I'm thinking of making a "dummy" for the 3D designers to use to get the coordinates of the points, but once case I can see this failing is when the two triangles don't exactly correspond to each other. Should I simply set in stone that the points must form an equilateral triangle of side length 10 units for example, or is there another way I could do the maths from triangles which do not completely match?

Perhaps there's another, more standard way to do what I want?


  • I wonder if this question would be more appropriate on ux.SE. – Brian Oct 7 '13 at 13:37
  • Perhaps my question doesn't make this clear, but the user never sees these snap points. This is about actually defining the relation between two objects. – Matt Jadczak Oct 7 '13 at 17:20

I'm going with the following.

This system relies on the snap points (in the sense of point=place, not a 3D point) being a group of 3 points arranged in an equilateral triangle. To avoid confusion, these triangles will be called snap hooks. A core may have an arbitrary number of snap hooks, each with its own ID. A module may only have one snap hook, the point with which it attaches to the core.

The snap hooks are specified with the points defined in a clockwise order. This order is important, as it defines the normal alignment of the snap hooks. It is suggested that the triangles be equilateral with a side length of 10mm. However, any triangles are supported, as defined in the algorithm.

(Throughout this, the core remains stationary. The module is moved so as to match the corresponding snap point on the core.)

  1. Two planes are calculated, 𝑃1,the plane defined by the 3 points of the core snap point, and 𝑃2, the plane defined by the module’s snap point. A normal vector is calculated for each according to the right-hand rule.
  2. The module is moved so that 𝑃1 = 𝑃2, that is so that the two snap hooks are coplanar, and that the two normal vectors are in opposing directions (facing each other).
  3. The module is moved so that the centre point of its snap hook is incident on the centre point of the core’s snap hook. (At this point, only one degree of freedom remains – rotation around the axis going through the common centre point, perpendicular to the common plane.)
  4. A line is calculated between the common centre point and vertex 1 of the core snap hook. The module is rotated so that the line between the common centre and vertex 1 of the module snap hook is collinear with this line, bringing the core and the module into alignment.

protected by gnat Jun 8 '17 at 12:16

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.