Interactions - Part 2

In Part 1 of our interactions example, we looked at how we can setup the interactions and worked on selections and hovering. Please only continue with this part once you completed part 1.

Dragging

Dragging is the most complex of the interactions. While for selecting and hovering, the object stays still, for dragging the object is moved and we can decide how it is doing that.

We now start a new example and start from the simple example. Similarly to the other InteractionManagers for selecting and hovering, we create a new DragManager for dragging. Additionally, we already apply a green effect material.

Now if we would try this example, the elements would not move yet. We need to decide on how we move them in the scene. There are multiple ways of moving the elements and we now evaluate them one by one.

Camera Plane Constraint

The easiest and most straightforward way of moving an element is to take the intersection point (the point where you clicked on the object) and create a plane that is parallel to the current camera plane. We can very easily do that by just adding a constraint and telling our DragManager about it. In the example below, you can now drag the model on our created constraint.

Plane Constraint

Our next constraint is similar to the CameraPlaneConstraint, but you decide where this plane is. You can create this constraint by setting a normal and a coplanar point on the plane.

For our next example we set the normal to the z-axis and the coplanar point to the origin. In the following example, you can see the results of this. The point of intersection is now projected onto the plane and moved from there.

Point Constraint

Another constraint that can be used is a point. A point is defined by the position and the radius in which the model is affected by it. The point is used to snap models to a specific position. We now create a point constraint that is in front of the model. Whenever you move the model close enough to the point, it will snap there. Otherwise, the point constraint is ignored. Therefore, this constraint can be perfectly combined with other constraints.

Line Constraint

The line constraint works very similarly to the point constraint. The line is defined by two points instead of one, but also has a radius in which it affects the model. The line we just created is in front of the model. Once again, you can see how the model is not affected by the snapping if it is not close enough.

You may have noticed that the object does not always snap with the offset that you want it to. This issue and how an object can be rotated by constraints, can be seen in Part 3 of the tutorial.