Solar Panel Layout Designer v5 — Three.js 3D

Real WebGL 3D powered by Three.js with Blender-style OrbitControls. Left-drag = rotate | Right-drag / Shift+left-drag = pan | Scroll = zoom.

Data Management

Roof Dimensions & Shape

Roof Size (feet)

Roof Width (E-W)

Roof Length (N-S)

Roof height from ground (ft)

4 vertices | Drag red points | Double-click edge to add | Scroll to zoom | Drag empty space to pan

Wall Padding (feet)

North wall

South wall

East wall

West wall

Stand & Panel Specifications

Elevated Stand Structure

Base along ground (ft)

Back leg height (ft)

Front leg height (in)

Link legs — front leg grows, back leg auto-grows by same amount

Elevation angleHypotenuse:

Panel Dimensions

Panel width (inches)

Panel length/height (inches)

Panel wattage (W)

Panels per stand (stacked)

Panel Orientation

Rotation (degrees)

Arrangement & Gaps

Layout Counts

Stands side-by-side (E-W)

Stand rows (N-S stacked)

Gaps (inches)

Between panels in stand

Between stands (E-W)

Between stand rows (N-S)

Offsets (feet)

Offset E-W (+east, -west)

Offset N-S (+north, -south)

3D Camera Controls

Camera Presets

Controls: Left-drag = Orbit | Right-drag = Pan | Scroll = Zoom
OrbitControls gives true Blender-style 3D interaction.

Camera Values

Focal length (mm)

Display Options

Show grid

Show world axes (RGB=XYZ)

Real-time shadows

Wireframe mode

Sun & Shadows

Sun Position

Sun elevation (deg)

Sun azimuth (0=N, 90=E, 180=S)

Wall height for shadow (ft)

Shadow Analysis

Top View — Plan (SVG)

Zoom: 100% | Scroll to zoom, drag empty space to pan

3D View — Three.js WebGL

Three.js 3D View
Left-drag = Orbit
Right-drag = Pan
Scroll = Zoom
Focal: 50mm

Camera presets below
Use Section preset for stand cross-section view