In Part 1 of our interactions example, we looked at how we can setup the interactions and worked on selections and hovering. In Part 2 we evaluated dragging and looked at the different constraints. If you haven’t looked at these parts of the tutorial, please do so before you continue here.


Anchors

If we now move the object to this point, it will always snap to it at the position where we clicked on the object. In most cases, this is not the desired behavior. Therefore, we add an anchor point to the InteractionData that is used for the calculation instead. An anchor point with the objects origin will always drag the object with the origin at the center of the drag operation.


It is also possible to use multiple drag anchor. This means that the object specified has multiple options which are selected by their distance to the constraints. In the example below we added three different drag anchors, one to the middle and one to each side. When you drag the model to the point in front of it, depending on the location, it will snap to different anchors.


Orientation

In our last step, we want to rotate the model whenever it snaps to the point. This can be done by adding an orientation factor to the point, and optionally also to the anchor. As we can see, the model now rotates around the position of the anchor whenever we are close enough.

Note: If there is an orientation preset on the anchor, the model is first rotated to by the inverse of the specified rotation around the anchor point before the rotation of the constraint is applied.


CodeSandBoxes

Selection

Dragging

Hovering