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

Lighting System

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

Visual Helpers

  • • Helper grid with theme-aware colors
  • • Optional axes helper (coordinate system)
  • • 3D scale bar indicator in corner
  • • Distance-based fog for depth perception

Post-Processing

  • • Real-time shadow mapping
  • • Optional bloom and tone mapping
  • • MSAA anti-aliasing for smooth edges
  • • Theme support (dark/light mode backgrounds)

Performance

  • • Frustum culling (render visible only)
  • • Level of Detail (LOD) for distant objects
  • • Instancing for repeated objects
  • • Texture compression

Mouse Controls

Camera Navigation

  • •Right Click + Drag: Rotate camera
  • •Middle Mouse + Drag: Pan camera
  • •Scroll: Zoom in/out
  • •Double Click: Focus on selected object

Object Manipulation

  • •Left Click: Select objects
  • •Ctrl + Click: Multi-select
  • •Delete: Remove selected objects

Gizmo Controls

Transform Modes

Translate
Move objects in 3D space
Rotate
Rotate around axes
Scale
Resize objects
  • • Hold Shift: Snap transforms for precision
  • • Local/World Space: Toggle coordinate system

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

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