Skip to content

Add three-floor townhouse example with plan/model view toggle#62

Merged
aka-blackboots merged 1 commit into
mainfrom
claude/floorplan-with-views-9wKY5
Apr 29, 2026
Merged

Add three-floor townhouse example with plan/model view toggle#62
aka-blackboots merged 1 commit into
mainfrom
claude/floorplan-with-views-9wKY5

Conversation

@bhairaav
Copy link
Copy Markdown
Collaborator

Summary

This PR adds a new comprehensive example demonstrating a three-floor townhouse (Ground / Main / Upper) modeled with OpenPlans walls, doors, and windows. The example includes an interactive UI that allows toggling between a plan-style top-down profile view and a full 3D model view, showcasing the library's ability to render both 2D floor plans and 3D architectural models.

The townhouse is 20'×32' with realistic room layouts:

  • Ground Floor: Garage, office/bedroom 3, bathroom, storage, and entry
  • Main Floor: Family room, dining, kitchen, pantry, and stair zone
  • Upper Floor: Master suite with bath and wardrobe, bedroom 2 with bath and wardrobe, and stair landing

The example also includes a polished UI with a hero panel, control buttons, and a legend explaining the floor structure.

Changes

  • examples/src/three-floor-townhouse.html (new): Complete interactive example with:

    • Three-floor townhouse geometry with 15+ walls per floor
    • 12 doors with proper frame and panel dimensions
    • 12 windows with sill heights and glass rendering
    • Plan View / Model View / Reset View buttons
    • Dynamic camera switching between orthographic (plan) and perspective (model) modes
    • Responsive UI with custom color palette and typography
    • Legend explaining the floor structure
  • examples/src/index.html (modified): Added featured card linking to the new three-floor townhouse example

Verification

The example can be viewed by opening examples/src/three-floor-townhouse.html in a browser. The interactive controls allow:

  1. Switching between plan view (2D orthographic) and model view (3D perspective)
  2. Resetting the camera to fit all elements in view
  3. Inspecting walls, doors, and windows across all three floors

Docs And Examples

Updated the examples index to feature the new three-floor townhouse example as a showcase of the library's capabilities for both 2D and 3D architectural visualization.

Reviewer Notes

  • The example demonstrates proper use of the OpenPlans API for creating multi-floor buildings with realistic dimensions and architectural elements
  • The UI implementation shows best practices for interactive view switching and responsive design
  • All geometry is defined programmatically without external assets, making it portable and maintainable

Checklist

  • I updated examples when user-facing behavior changed
  • I did not hand-edit generated output such as dist/ or examples/dist/

https://claude.ai/code/session_01Th3SP4MoWEWd9g3reEcSt1

Adds a new example modelling a 20'x32' three-story townhouse (Ground / Main /
Upper) at stacked elevations using OpenPlans walls, doors, and windows. The
ground floor includes a garage with a south-facing door opening, an office,
and a bathroom; the main floor has a family room, kitchen, dining, and stair
zone; the upper floor has a master suite and second bedroom with private
baths and wardrobes. The example wires the existing CameraMode plus per-element
profileView/modelView toggles so the user can switch between top-down plan
view and full 3D model view.
@aka-blackboots aka-blackboots merged commit d7b60f7 into main Apr 29, 2026
@aka-blackboots aka-blackboots deleted the claude/floorplan-with-views-9wKY5 branch April 29, 2026 14:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants