EditorDemo

Try the Demo

This is only a showcase of a university project — a small proof of concept for an editor that allows users to create and manage digital exhibitions and plan room layouts. Built in TypeScript with Babylon.js, React.js and Bootstrap Icons.

Note

This project was initially built as a desktop app, navigation on mobile devices may not be fully optimized.

Project Description

The editor allows users to position, orient, and scale objects within a 3D space through a gizmo interface.

Key Features

• Context-Sensitive GUI
  • Adapting based on the selected gizmo mode
  • Anchored to the gizmo root's position on the screen
• Transformation Modes
  • Switching between moving, rotating, and scaling objects
• Reference Space Options
  • Changing reference space for transformations between world or local object space
• Snap Distances/Angles
  • Limit movements and rotations to predefined step size
• Scaling Options
  • Scaling an object around its center or in a given direction
• Copy/Delete Objects
  • Duplicate or remove selected objects
• Axis Indicators
  • Tracking the translation gizmo’s axis directions on the screen
  • Position objects on surfaces. Since Babylon.js does not support precise mesh collision, raycasting is used as a heuristic approach. This therefore can (very occasionally) result in small overlaps
• Undo/Redo Functionality
  • Change the flow of actions through a command stack
• Multi-Select
  • Manipulate multiple objects simultaneously
• Spawning new Objects
  • Place new meshes in the scene based on the camera position and orientation

Controls

• side menu:

  -- undo: reverse the last action
  
  -- redo: reverse the last undo action
  
  -- add object: select a new shape to add to the scene
  
  -- multi-select: toggle to add object to the selection without deselecting others; alternatively, hold shift
  
  

• gizmo menu:

  -- translate mode: move the selected objects within the scene by dragging on the gizmo arrows or planes
  
  -- rotate mode: rotate the selected objects around the gizmo center by dragging the rings
  
  -- scale mode: scale the selected objects uniformly by dragging one of the corner boxes or non-uniformly with the face boxes
  
  -- local space: transformations are based on the first selected mesh's local object space
  -- global space: transformations are applied in reference to the scenes world system
  
  -- copy: duplicate the selected objects in place
  
  -- delete: remove all selected objects from the scene
  
  

  only available in translate mode:

  free | 0.1m | 0.2m ... -- snap distance: all movement happens in increments of the selected value or freely
  

  -- axis snap: move the selection along the gizmo axis of the corresponding color until one of the selected objects hits an obstruction. The dashed version moves along the axis' negative direction. If no obstruction is found after a certain distance (50m by default) no movement takes place.
  
  

  only available in rotate mode:

  free | 15° | 30° ... -- snap angle: all rotations happens in increments of the selected value or freely
  
  

  only available in scale mode:

  -- centered scaling: scaling is centered on the gizmo position and directed outwards from there
  -- directional scaling: scaling factors are applied only in one direction causing the selection's opposite side to remain in place
  
  

Current Status

Most relevant features have been ported, but this demo should not be considered final in any form. If inspiration strikes the occasional bug might get fixed but as active developement on the main project has since concluded this showcase will remain mostly dormant.