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