Interactions - Part 1
Interactions are a great way to create more interactive experiences in the 3D viewer by letting users select and drag objects from the 3D scene, using their mouse or touchscreen. There are 3 ways to interact with the geometry directly: selecting, hovering and dragging. This first part of the tutorial focuses on selecting and hovering while the next two parts explain how to implement dragging.
The complete API documentation of the interactions module can be found here.
This is a feature that can be added via a separate CDN or npm-module on top of our viewer module. To see a glimpse of what can be done, have a look at this CodeSandBox.
To install it call
npm install --save @shapediver/viewer.features.interactionor if you use the viewer via a CDN just can just get the SDVInteractions property from the window object.
Selection
First, we’ll create a session and a viewer as discussed in the simple example. Next, we’ll create an InteractionEngine, which is the core of this feature. It can handle different IInteractionManagers and distributes the Events to them. Furthermore, we create an implementation of the IInteractionManagers the SelectManager which is responsible for selecting and deselecting objects.
This little example is almost finished, now you only need to add data items to your model which tell the InteractionEngine at which node of the scene tree the interaction should take place. In our case, we’ll just add the data at the level of the session. This code already results in the provided example below. If you click on the cabinet, it will be selected. If you click on it again or anywhere else in the scene, it will be deselected.
The next step is now to select different outputs and not the whole session. Therefore, we need to specify our data at a different level. This results in all outputs being selectable. You can even go to the lowest level possible, or chose different levels to define the interaction data.
For the last step, we want to change the the effect that is applied when doing a selection. This can be done by specifying a specific material. Which results in the selected item being red now.
Hovering
Hovering works pretty much the same way as selecting. To our previous example we just add a HoverManager. To make hovering work, we also need to adapt the InteractionData.
Finally, we change the effect of hovering to a blue material. The results can be seen below, you can now hover over the different outputs and select them. The different effects are always queued up and the last one applied is chosen.
To see how dragging works, visit the Part 2 of this Tutorial!