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.
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, simply add the CDN
Note: Please select a fixed version by replacing
VERSION_NUMBER with the same version as you have selected for the main viewer CDN.
npm install --save @shapediver/viewer.features.interaction
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
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 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
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!