Skip to main content
Master the 3D viewport navigation to efficiently explore and inspect your BIM models.

​
Camera Controls Overview

AI-BIM App uses an OrthoPerspectiveCamera that supports both perspective and orthographic projection modes. The camera provides intuitive controls for navigating 3D models. Reference: Camera setup at /src/main.ts:44

​
Basic Navigation

​
Orbit (Rotate)

Rotate the camera around your model to view it from different angles.
1

Left Mouse Button

Click and hold the left mouse button, then drag to rotate the camera around the model center point.
2

Free Rotation

Move the mouse in any direction to orbit horizontally and vertically around the model.
3

Release to Stop

Release the mouse button to stop rotating. The camera will continue with slight momentum.

​
Pan (Move)

Move the camera parallel to the view plane without rotating.
1

Right Mouse Button or Middle Button

Click and hold the right mouse button (or middle mouse button), then drag to pan the view.
2

Shift + Left Click (Alternative)

Hold the Shift key and drag with the left mouse button to pan.
3

Position the View

Pan to center specific areas of interest in your viewport.

​
Zoom

Move the camera closer to or farther from the model.
1

Scroll Wheel

Roll the mouse wheel forward to zoom in, or backward to zoom out.
2

Pinch Gesture (Touchpad)

Use two-finger pinch gestures on touchpads to zoom smoothly.
3

Focus on Point

The camera zooms toward the point under your cursor for precise control.

​
Camera Toolbar

Access advanced camera controls from the Selection tab in the floating toolbar. Reference: Camera controls at /src/components/Toolbars/Sections/Camera.ts:7

​
Fit Model to View

Automatically frame the entire model in the viewport.
1

Click Fit Model Button

In the Camera section of the Selection toolbar, click the Fit Model button.
2

Camera Adjusts Automatically

The camera calculates the optimal position and zoom level to show all visible elements.
3

0.5 Padding Applied

A 50% padding ensures the model doesn’t fill the entire screen, providing visual breathing room.
Reference: onFitModel function at /src/components/Toolbars/Sections/Camera.ts:7
Use Fit Model after loading a new file or after hiding/showing elements to reset your view.

​
Lock/Unlock Camera

Freeze camera movement to prevent accidental navigation changes.
1

Click Disable Button

In the Camera section, click the Disable button (shows a lock icon).
2

Camera Locked

All camera controls are disabled. The button changes to Enable with an unlock icon.
3

Click Enable to Unlock

Click again to restore camera controls.
Reference: onLock function at /src/components/Toolbars/Sections/Camera.ts:13
Lock the camera when taking screenshots or when you need to click UI elements without accidentally moving the view.

​
Advanced Navigation Techniques

​
Focus on Selection

Zoom the camera to selected elements for detailed inspection.
1

Select Elements

Click elements in the viewport to select them (they will be highlighted).
2

Click Focus Button

In the Selection toolbar, click the Focus button.
3

Camera Moves to Selection

The camera smoothly transitions to frame your selected elements with a 20% boundary.
Reference: onFocusSelection function at /src/components/Toolbars/Sections/Selection.ts:126

​
Viewport Rest Threshold

The camera system includes intelligent rest detection:
  • When the camera stops moving for 0.25 seconds, it triggers rest events
  • This optimizes rendering and streaming performance
  • Tile loading is optimized during camera rest periods
Reference: Camera rest threshold at /src/main.ts:90

​
Projection Modes

The camera supports two projection modes:

​
Perspective Mode

  • Objects farther away appear smaller (realistic view)
  • Better for understanding spatial relationships
  • Default mode for architectural visualization

​
Orthographic Mode

  • Parallel projection with no perspective distortion
  • Objects maintain size regardless of distance
  • Ideal for measurements and technical drawings
Projection mode switching is currently implemented in the camera system but may need to be enabled in the UI. Check the Camera toolbar for a dropdown to switch modes.

​
Viewport Grid

The viewport includes a world grid to help with orientation:
  • Grid color: Dark gray (#424242)
  • Primary grid size: 2 units
  • Secondary grid size: 8 units
  • Grid follows camera movement
Reference: Grid configuration at /src/main.ts:46

​
Selection and Highlighting

The viewport includes an integrated highlighter system:

​
Click to Select

1

Click an Element

Click any element in the 3D view to select it.
2

Element Highlights

Selected elements are highlighted with visual emphasis.
3

View Properties

Element properties appear in the right panel when selected.

​
Zoom to Selection

When zoomToSelection is enabled (default), clicking an element automatically adjusts the camera to focus on it. Reference: Highlighter setup at /src/main.ts:84

​
Performance Optimization

​
Culling System

AI-BIM App uses an automatic culling system that:
  • Hides objects outside the camera view
  • Improves performance for large models
  • Updates automatically during camera rest
Reference: Culler setup at /src/main.ts:87

​
Streaming for Large Models

For models loaded as BIM Tiles:
  • Elements stream in based on camera position
  • Visible tiles load automatically
  • Hidden elements unload to save memory
  • 10-second threshold for tile visibility
Reference: Tile streamer configuration at /src/main.ts:77
Double-click an element to both select it and zoom to it in one action.
Hold Shift while orbiting to rotate around the point under your cursor instead of the model center.
For large models, wait for the camera to rest before zooming in further - this allows tiles to load fully.
Use Show All from the Selection toolbar to reveal all hidden elements and reset visibility.

​
Troubleshooting Navigation

​
Camera Won’t Move

  • Check if the camera is locked (lock button shows in Camera toolbar)
  • Ensure you’re clicking in the viewport, not on UI elements
  • Try clicking Enable in the Camera section

​
Model Disappeared

  • Use Fit Model to reset the camera view
  • Check if elements are hidden (use Show All in Selection toolbar)
  • Zoom out significantly - you might be inside the model
  • Large models may have performance constraints
  • Close unnecessary browser tabs to free memory
  • Consider using BIM Tiles for better streaming performance

​
Can’t Select Elements

  • Ensure the highlighter is enabled (check Settings panel)
  • Measurement tools may interfere - disable them in the Measurement tab
  • Some fragments may not be selectable if they lack geometry

​
Keyboard Shortcuts

While most navigation is mouse-based, some useful shortcuts include:
  • Delete - Delete selected measurements (when measurement mode is active)
  • Shift + Drag - Pan view with left mouse button

​
Next Steps

Now that you can navigate the 3D viewport:

Build docs developers (and LLMs) love

Get started for freeTalk to us