3D Concrete Viewer

The 3D Concrete Viewer provides an interactive visualization of concrete items within a scope, allowing you to see spatial relationships, position items, and visualize rebar and formwork in three dimensions.

info

The 3D Viewer is built with React Three Fiber and supports drag-and-drop positioning, elevation management, and comprehensive visualization controls.

Key Features

🧊

Interactive 3D Rendering

Visualize prisms (slabs, walls) and cylinders (piers, columns) in semi-transparent 3D

🔀

Position Mode

Right-click drag to position items with snap-to-rebar functionality

📚

Elevation Management

Set item elevation relative to job site grade (inches)

📏

Measurement Tool

Click-to-measure distances in 3D space with permanent locked measurements

Accessing the 3D Viewer

1

Navigate to Scope Detail

Open a bid and click on a scope to view scope details.

2

Open Concrete Module

Click the Concrete tab to view concrete items.

3

Show 3D View

Click the "Show 3D View" button above the concrete items table.

note

The 3D Viewer is lazy-loaded to reduce initial page load time.

4

Explore 3D Model

The 3D viewer opens showing all concrete items positioned in 3D space.

• Rotate: Left-click drag
• Zoom: Mouse wheel
• Pan: Middle-click drag or Shift + left-click drag

3D Visualization

Rendering Modes

Element	Appearance	Opacity
Concrete Items	Light gray (#E5E5E5)	60% (semi-transparent)
Selected Items	Yellow (#ffff00)	90% (more opaque)
Rebar	Red (#FF0000) lines	100%
Formwork	Brown (#A0522D) boards	60%
Ground Plane	Transparent green or grid	Varies

tip

Items are always transparent to allow seeing through slabs for positioning items underneath.

Visual Elements

Rebar Visualization

Red lines showing rebar grid with OC (on-center) spacing:

• Calculated from rebar OC spacing in concrete items
• Grid intersections provide snap points for positioning
• Toggle on/off via Rebar switch in controls

Formwork Visualization

Brown boards (2" thick) on exterior sides:

• Prisms only (lumber can't bend around cylinders)
• Exterior sides only (interior formwork not shown)
• Toggle on/off via Formwork switch in controls

Dimension Lines

Shows measurements for:

• Length, Width, Height/Depth
• Rebar OC spacing (when rebar enabled)
• Formwork thickness (when formwork enabled)

Toggle on/off via Dimensions switch in controls

Ground Plane

Visualization modes:

Mode	Appearance
Grid	Grid lines at job site elevation
Solid	Transparent green plane
Wireframe	Wireframe grid
Off	No ground plane

Select mode from Ground Plane dropdown in controls

Positioning Items

Position Mode allows you to drag items and snap them to rebar intersections:

1

Enable Position Mode

Toggle Position Mode switch in the control bar.

note

Enabling Position Mode automatically disables Measurement Mode (modes are mutually exclusive).

2

Select Item

Left-click on an item to select it (turns yellow).

warning

Only the selected item can be dragged. This prevents accidental movement of other items.

3

Position Item

Right-click and drag the selected item to a new position.

Snap-to-Rebar:

• Items automatically snap to rebar grid intersections
• Visual snap indicator shows when snapping is active
• Snap threshold ensures smooth dragging

4

Save Position

Position auto-saves when you release the mouse button (debounced).

info

Positions are persisted to the database and reload correctly across sessions.

Undo/Redo

Position Mode includes undo/redo functionality:

• Undo - Revert to previous position
• Redo - Reapply undone position
• History tracks all position changes during the session

tip

Use Undo if you accidentally move an item to the wrong location.

Elevation Management

Set item elevation relative to job site grade:

1

Enable Position Mode

Position Mode must be active to edit elevations.

2

Select Item

Left-click on an item to select it.

3

Open Elevation Editor

The Elevation Editor panel appears top-right when an item is selected.

4

Set Elevation

Enter elevation value in inches:

• Positive values - Above grade (e.g., 12 for 12" above)
• Negative values - Below grade (e.g., -6 for 6" below)
• Zero - At grade level

note

Elevation represents the bottom of the item, not the top.

5

Save Elevation

Click "Save" or press Enter to apply the elevation.

Item moves vertically to the specified elevation.

Measurement Tool

Measure distances between points in 3D space:

1

Enable Measurement Mode

Toggle Measurement Tool switch in the control bar.

note

Enabling Measurement Mode automatically disables Position Mode.

2

Click Two Points

Click on two points in the 3D scene to measure the distance between them.

• Detects intersections with 3D objects (meshes)
• Also works on ground plane if no object intersection

3

View Measurement

Distance displays in feet and inches format:

8' 3" (99.0")

Format: {feet}' {inches}" ({total inches}")

4

Lock Measurement (Optional)

Double-click a completed measurement to lock it permanently.

• Locked measurements persist on screen
• Multiple locked measurements can exist simultaneously
• Useful for documenting critical dimensions

Measurement Undo/Redo

Measurement Mode has its own undo/redo history:

• Undo - Remove last measurement
• Redo - Restore removed measurement

tip

Temporary (unlocked) measurements auto-clear after 3 seconds. Lock measurements you want to keep.

Quantity Expansion

Items with quantity > 1 create multiple visual instances:

Example:

Concrete Item: "Footing"
Quantity: 5

Result: 5 separate visual instances in 3D viewer

Features:

• Each instance has unique ID: {originalId}-instance-{index}
• Instances can be positioned independently
• Original item ID tracked for API updates
• Enables positioning identical items in different locations

note

Quantity expansion happens automatically. You don't need to create duplicate items.

Camera Controls

Camera Presets

Click camera preset buttons for quick views:

Preset	Description
Top	Overhead view (looking down)
Front	Front elevation view
Side	Side elevation view
ISO	Isometric 3D view
Fit	Auto-zoom to frame all items

tip

Camera presets dynamically target actual object positions, so they work correctly regardless of where items are placed.

Manual Camera Control

Action	Control
Rotate	Left-click drag
Zoom	Mouse wheel
Pan	Middle-click drag or Shift + left-click drag

note

In Position Mode, camera controls are disabled to prevent accidental camera movement while positioning items. Camera state is preserved when toggling modes.

UI Panels

All UI panels are draggable and collapsible:

Legend Panel

Color and dimension reference:

• Colors: Concrete gray, Selected yellow, Rebar red, Formwork brown
• Dimensions: L/W/H/⌀ symbols
• Collapsible by clicking header
• Draggable to any location

Statistics Panel

Real-time aggregate statistics:

• Total items and quantity
• Total cubic yards and square feet
• Total rebar pounds
• Breakdown by shape (prisms vs cylinders)
• Breakdown by elevation (above/at/below grade)

Dimension Label

Detailed item information card:

• Shows when item is selected
• Displays all item properties
• Positioned near selected item
• Collapsible and draggable

Elevation Editor

Inline elevation input:

• Appears when item is selected in Position Mode
• Set elevation relative to job site grade
• Collapsible and draggable

tip

Double-click any panel's drag handle to reset it to default position.

Export and Print

Export Screenshot

Capture the 3D viewer as a PNG image:

1

Click Export Screenshot

Click the "Export Screenshot" button (bottom-left).

2

Capture

System captures:

• 3D canvas (WebGL content)
• HTML overlays (dimension labels, measurements)
• Draggable panels (if visible)

note

UI buttons are automatically hidden during capture.

3

Download

File downloads with descriptive filename:

{BidName}-{ScopeName}-{YYYY-MM-DD}.png

Example: Foundation-Slab-2025-01-29.png

Technical: Uses html2canvas library to capture full DOM including HTML overlays that aren't part of the WebGL canvas.

Print View

1

Click Print

Click the "Print" button (bottom-left).

2

Browser Print Dialog

Browser print dialog opens with:

• UI overlays hidden for clean printout
• Only 3D canvas is printed

3

Print or Save as PDF

Print to physical printer or save as PDF via browser.

Fullscreen Mode

Expand the viewer to fill entire browser window:

1

Click Fullscreen

Click the "Fullscreen" button (far right of control bar).

2

Expanded View

Viewer fills browser window with all controls and panels remaining accessible.

3

Exit Fullscreen

Press ESC key or click "Exit Fullscreen" button.

tip

Fullscreen mode is useful for detailed positioning work or presentations.

SF-Based Dimensions

Items using square footage (SF) instead of length/width calculate realistic rectangular dimensions:

Calculation:

• Aspect ratio: 2:1 (length:width)
• Minimum size: 1 foot (12 inches) for each dimension
• Formula: length = sqrt(sf × 2), width = sf / length

Example:

Square Footage: 100 SF

Calculated:
Length: 14.14 feet
Width: 7.07 feet

note

All rendering components use effective dimensions, whether specified directly or calculated from SF.

Coordinate System

Understanding the 3D coordinate system:

Axis	Direction	Purpose
X	Horizontal (left-right)	Relative positioning
Y	Vertical (up-down)	Elevation
Z	Horizontal (forward-back)	Relative positioning

Units:

• Input: Inches (user-friendly)
• Internal: Meters (Three.js standard)
• Conversions handled automatically

Elevation:

• Bottom of item represents elevation (not top)
• Formula: y = elevationMeters + itemDepthMeters / 2

Role-Based Access

Feature	ADMIN	ESTIMATOR	PM
View 3D model	✅	✅	✅
Position items	✅	✅	❌
Set elevation	✅	✅	❌
Measure distances	✅	✅	✅
Export screenshot	✅	✅	✅

note

PM role has read-only access (view and measure only, cannot position).

Troubleshooting

Positions reset after hiding viewer

This issue was fixed in December 2025. If you're still experiencing it:

1. Ensure you're running the latest version
2. Backend must return elevation, relativeX, relativeZ in API responses
3. Clear browser cache and reload

Snap-to-rebar not working

Check:

1. Position Mode is enabled
2. Item is selected (yellow)
3. Rebar visualization is enabled
4. Item has valid rebar OC spacing

Camera presets showing blank screen

This was fixed in December 2025. Camera presets now dynamically target object positions. Refresh the page to apply the fix.

Ground plane not centered

Ground plane dynamically centers around objects. If it appears off-center:

1. Click "Fit" button to recalculate scene bounds
2. Ground plane should recenter automatically

Best Practices

🧲

Enable Rebar for Positioning

Always enable rebar visualization when positioning items to take advantage of snap-to-rebar functionality.

📷

Use Camera Presets

Use Top/Front/Side presets to verify positioning from different angles before saving.

🔒

Lock Important Measurements

Double-click measurements you want to document permanently.

📚

Position Related Items Together

Group related items (e.g., footings under a slab) by positioning them at appropriate elevations.

Next Steps

🧮

Scope Multipliers

Scale scope costs for repeated areas

📈

Cost Rollup

Understand how costs aggregate