You can use the the 3D viewport control to enable 3D viewing in your SAP Fiori application. This control is available in the Visual Interaction toolkit library. The 3D viewport control can display simple and complex 3D objects in SAP Fiori, and offers basic user interaction with the 3D environment and its objects.
Use the 3D viewport control if:
- You want to show 3D models in an SAP Fiori environment.
- You want to let users view 3D files in the browser without downloading any browser plugins.
- You want to enable users to interact with 3D models stored locally or remotely.
- You want to load multiple 3D models at the same time.
Do not use the 3D viewport if:
- There is not enough space for users to interact with 3D content (in other words, the 3D viewport is too small to interact with 3D models).
- You require simple visual representations of objects or functions. In this case, use sap.m.Image instead.
Behavior and Interaction
The 3D viewport supports a range of specific mouse and touch gestures by default. The available gestures are determined by the viewport component with which you interact.
When a 3D model is loaded into the 3D viewport, you can pan, zoom, rotate, and click or tap the model with the following actions:
|Action||Touch Gesture||Mouse Gesture||Keyboard Shortcut|
|Select or deselect an object in the scene||Tap||Left click||N/A|
|Zoom onto and visually focus on an object in the scene||Double tap||Double click||N/A|
|Rotate the scene||Tap and drag||Left click + drag||Cursor keys|
|Pan the scene||Two-finger tap and drag||Hold mouse middle button and drag
Hold both left and right buttons and drag
|Shift + cursor keys|
|Zoom out of the model||Pinch||Mouse wheel scroll forward
Right click + move mouse up
|Minus key (-)|
|Zoom into the model||Stretch||Mouse wheel scroll backwards
Right click + move mouse down
|Plus key (+)|
The recommended selection behavior is known as “sticky” selection (default):
- When a user clicks on an object, it is marked as selected.
- Clicking another object selects that object, along with all previously selected objects.
- Clicking a selected object deselects it.
- Clicking empty space deselects all objects.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.