/zoning-envelope — 3D Zoning Envelope Viewer

Generate an interactive 3D axonometric zoning envelope viewer as a self-contained HTML file. Uses Three.js with OrbitControls — opens in any browser, no dependencies.

Requires a zoning analysis report generated by

/zoning-analysis-nyc

/zoning-analysis-uruguay

Usage

/zoning-envelope path/to/zoning-analysis.md
/zoning-envelope padron 350
/zoning-envelope 250 hudson
/zoning-envelope

Step 1: Find the Report

If a

.md

path is provided

Read the file directly.

If a search term is provided (address, padrón number, etc.)

Search for matching zoning analysis reports in these locations:

• ./

  (Uruguay)

• ./

  (NYC)
• Current working directory

Use Glob + Grep to find reports matching the search term. If multiple matches, show the options and ask the user to pick one.

If no argument is provided

Search for the most recently modified

zoning-analysis-*.md

padron-*.md

No zoning analysis report found. Run

/zoning-analysis-nyc

or

/zoning-analysis-uruguay

first, then come back with

/zoning-envelope

.

If no Envelope Data block is found

If the report exists but lacks the

## Envelope Data

This report was generated before the Envelope Data format was added. Re-run the zoning analysis to get an updated report, or I can attempt to parse the tables (results may be approximate).

Step 2: Parse Envelope Data

Read the

## Envelope Data

{
  "lot_poly": [[x, y], ...],
  "unit": "ft" | "m",
  "setbacks": { "front": 6, "rear": 3, "lateral1": 3, "lateral2": 2 },
  "volumes": [
    { "type": "base", "inset": 20, "h_bottom": 0, "h_top": 85, "label": "base" },
    { "type": "tower", "inset": 10, "h_bottom": 85, "h_top": 290, "label": "tower" }
  ],
  "height_cap": 290,
  "info": { "title": "...", "zone": "...", "id": "...", "area": "..." },
  "stats": { "key": "value", ... },
  "scenarios": null
}

Step 3: Normalize to Envelope Model

From the parsed JSON, build the internal model:

• LOT_POLY

  — the lot boundary polygon in local units

• UNIT

  — "ft" or "m"

• VOLUMES

  — array of volumes to extrude, each with inset distance, height range, label

• HEIGHT_CAP

  — max height for the amber cap plane

• INFO

  — title, zone, id, area for the overlay panels

• STATS

  — key/value pairs for the parameters panel

• SCENARIOS

  — if present, multi-scenario toggle data

Compute inset polygons using the

insetPolygon(poly, distance)

Compute volumes by extruding inset polygons between height intervals.

Step 3: Generate HTML

Build a self-contained HTML file following the design system below.

Design System

#f5f3ef

#dcd7cd

#2c2c2c

#c85a50

#6ba0c5

#6ba0c5

#6ba0c5

#e8a849

#333333

#d0ccc4

Typography: Helvetica Neue, 11px for overlay panels, canvas sprites for 3D labels.

Layout:

• Top-left: Title + address/zone
• Top-right: Parameters panel (stats)
• Bottom-left: Color legend
• Bottom-right: Controls hint

All materials:

transparent: true

depthWrite: false

side: DoubleSide

CDN Import Map

<script type="importmap">
{ "imports": {
    "three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js",
    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"
} }
</script>

Required Utility Functions

Include these in every generated HTML:

signedArea(poly)

insetPolygon(poly, d)

d

abs(signedArea(result))

abs(signedArea(poly))

triangulate(poly)

BufferGeometry.setIndex()

extrudePolygon(poly, hBottom, hTop, color, opacity)

THREE.Group

1. BufferGeometry

   with triangulated top/bottom faces + side quads
2. Wireframe edges: top ring, bottom ring, vertical edges at each vertex

groundPolygon(poly, color, opacity, yOffset)

centroid(poly)

[cx, cz]

createTextSprite(text, options)

THREE.Sprite

fontSize

color

bgColor

Scene Setup

renderer = WebGLRenderer({ antialias: true })
renderer.setClearColor(0xf5f3ef, 1)
camera = PerspectiveCamera(35, aspect, 1, maxDim * 10)
camera.position = centroid + [maxDim * 1.5, maxDim * 1.0, maxDim * 1.5]
controls = OrbitControls with damping
AmbientLight(0xffffff, 0.75)
DirectionalLight(0xffffff, 0.35) from upper-right

Scale camera distance to the lot's maximum dimension so it works for both small Uruguay lots (30m) and large NYC lots (170ft).

Geometry Pipeline

For each generated file:

1. Fix polygon winding to CCW using

   signedArea

2. Lot ground plane:

   groundPolygon(lotPoly, ...)

   + outline + vertex markers (small spheres)
3. Edge labels: On edges > 20 units, place a

   createTextSprite

   at the edge midpoint, offset outward
4. Setback zone: Render lot polygon as red → overlay inset polygon as lot color. Draw inset as dashed line.
5. Volumes: For each volume in the model, compute inset if needed, then

   extrudePolygon(...)

6. Height cap:

   groundPolygon(topPoly, amber, ...)

   at max height
7. Height labels: Dashed vertical lines + text sprites at key heights
8. Street label: At the street-facing edge (Z ≈ 0 or the edge closest to the origin)
9. Area label: At lot centroid
10. Grid:

    THREE.GridHelper

    scaled to lot size, subtle opacity

Multi-Scenario Support

If

SCENARIOS

1. Create a

   THREE.Group

   per scenario
2. Add toggle buttons in a

   #scenario-bar

   div (top-left, below title)

3. showScenario(key)

   function:
   • Toggle group visibility
   • Update stats panel content
   • Update legend if needed
4. Active button gets

   .active

   class (dark background)
5. Lot dividers show/hide based on whether lots are unified

Reference Implementations

./zoning-envelope-250-hudson-st.html

./zoning-envelope-padron-444-san-carlos.html

./zoning-envelope-padrones-4096-4119-buenos-aires.html

Use these as the code baseline. Copy utility functions verbatim from the Padrón 444 implementation (cleanest version).

Step 5: Save File

Save the HTML next to the source report with

zoning-envelope-

• padron-350-punta-del-este.md

  →

  zoning-envelope-padron-350-punta-del-este.html

• zoning-analysis-250-hudson-st.md

  →

  zoning-envelope-250-hudson-st.html

Open the file in the browser after saving.

Notes

• Dependency: This skill requires a zoning analysis report. It does not perform zoning lookups, coordinate conversion, or regulation parsing — that's the analysis skill's job.
• Units: NYC reports use feet, Uruguay uses meters. The

  unit

  field in the Envelope Data block determines all labels and scaling.
• Camera: Position proportional to max lot dimension.

  PerspectiveCamera(35)

  with OrbitControls.
• Multi-lot: When the report includes

  scenarios

  , generate toggle buttons. Use simplified rectangles if individual lot polygons are not available in the report.