RFDT Solver and WiTwin Simulator are undergoing internal testing as we prepare for public release. The functions are limited. Sign up to receive updates.

Viewport

Main 3D rendering canvas for real-time scene interaction and visualization

Under Construction

This documentation is currently being developed and will be available soon.

Overview#

The Viewport is the main 3D rendering canvas where you interact with and visualize the scene in real-time. Built with Three.js and React Three Fiber, it features PBR (Physically Based Rendering) with environment reflections, IBL lighting, and smooth orbital camera controls.

3D Rendering#

  • Ambient light for base illumination
  • Directional light for shadows
  • IBL (Image-Based Lighting) using environment.exr
  • PBR materials with environment reflections

Mouse Controls#

Camera Navigation#

ActionDescription
Right Click + DragRotate camera
Middle Mouse + DragPan camera
ScrollZoom in/out
Double ClickFocus on selected object

Object Manipulation#

ActionDescription
Left ClickSelect objects
Ctrl + ClickMulti-select
DeleteRemove selected objects

Gizmo Controls#

Transform Modes#

ModeDescription
TranslateMove objects in 3D space
RotateRotate around axes
ScaleResize objects

Tip

Hold Shift for snapping transforms to grid for precision. Toggle between Local/World Space coordinate systems.

Drag & Drop#

  • Mesh Files: Drop .obj, .ply, .stl files to import
  • Texture Files: Drop images onto objects for textures
  • Objects: Drag from Hierarchy to reposition

Keyboard Shortcuts#

ShortcutAction
DeleteDelete selected objects
Ctrl + DDuplicate selected
FFocus on selected
GToggle grid
WTranslate gizmo
ERotate gizmo
RScale gizmo
SpaceToggle gizmo
Ctrl + ZUndo
Ctrl + YRedo

Context Menu#

Right-click in the viewport to access:

  • Create primitive objects
  • Duplicate selected
  • Delete selected
  • Focus on object
  • Reset camera