Interactions - Part 3
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.
Additional CodeSandBoxes
Kitchen Configurator
A rudimentary kitchen configurator with elements being dragged in from HTMLElements.Light Controls
Controlling the lights via draggable HTMLElements.Dragging and Hovering
Combined dragging and hovering.Interactions of different viewports and sessions
Two sessions are displayed in two separate viewports and both are made interactable.Multiple Drag Points
Drag an object and specify multiple drag points.Multiple Drag Points - extended
Drag an object and specify multiple drag points. Restrict where the object can be placed.Simple Sphere Dragging
Drag the spheres to create the outline of the object.Interactivity by Naming Scheme
Due to a naming scheme defined in GH, use these names for interaction hierarchy.Interactivity by Naming Scheme
Due to a naming scheme defined in GH, use these names for interaction hierarchy.Programmatic Selection / Programmatic Deselection
Select and object programmatically and deselect if after a timeout.Permanent way of adding InteractionData
By using the updateCallback, the InteractionData is applied every time the output is updated.Grouping of Objects without Hierarchy
With the groupId, objects that are not related in the scene tree hierarchy can still be interacted with as if they were.Grouping of Objects without Hierarchy - extended
With the groupId, objects that are not related in the scene tree hierarchy can still be interacted with as if they were.
Selection
Model Selection
The whole model is selectable. Deselecting is disabled when clicking on empty space.Selection of Outputs - Event Listener
Make separate outputs selectable and get events for the selections.Selection of Outputs with no material change
Make separate outputs selectable and get events for the selections. The outputs are not highlighted with the effect material.Selection on onUp event
The whole model is selectable. Selection happens on onUp event.Multi Selection
Make separate outputs selectable at the same time.Programmatic Deselection
When an object is selected a timer is started to deselect the object.
Dragging
Drag Event Info Extension
New properties that are available in drag events.