Deck Designer - Three.js

Deck Dimensions

Size Preset:

Width (meters):

Depth (meters):

Height (meters):

Joist Spacing (c/c):

Joist Profile:

Deck Shape:

Cut Corner Mode (click corners)

Enable, then click any corner label (A/B/C/D) to cut that corner (creates a 5-sided deck).

Cut Corner Angle (deg): 45°

45° = equal chamfer. Lower/higher values create angled cuts (e.g. 20°).

Selected Corner Size (m): -

Select a cut corner handle to edit size.

Side Width Controls (meters)

Front Inset

Back Inset

Left Inset

Right Inset

House Connection

Wall Position:

Wall Color:

Pool

Enable Built-in Pool Pool Dimensions (W / L / Depth)

Pool Position (X / Z)

Deck Board Style

Pattern:

Board Width (mm):

Board Thickness (mm):

Board Length (m):

Fascia Length (m):

Board Gap Side-to-Side (mm):

Board End Gap (mm):

Perimeter Gap to Wall/Solid (mm):

Max Board Overhang Past Joist (mm):

Main Traffic Direction:

Recommended: boards run opposite to main traffic direction.

Hidden Fastener Waste Factor:

Ventilation and Drainage

Enable channels

Drainage system type

Drainable path (from point to point)

Selected path

Placement

Color

Deck Color

Railings

Add Railing

Railing Color:

Stairs

💡 Tip: click Add Stairs, hover an edge to snap, click to place. Drag existing stairs to slide along perimeter.

View

Show Grid

Instructions

🖱️ Left click + drag to rotate
🖱️ Right click + drag to pan
🖱️ Scroll to zoom
⚙️ Adjust settings to customize