Task: SketchBIM — Simple Architectural Plan Editor (Web)
Goal
Build SketchBIM, a minimal web application for drawing architectural plans in 2D across five coordinated views (section, front, side, top, bottom), with a simple 3D preview generated from the same data. Straight and curved walls are both supported, in 2D and in 3D.
Use the name SketchBIM consistently: package name sketchbim, page title,
app header, and the root key of the exported JSON file.
Core architectural constraint (non-negotiable)
The five views are NOT independent canvases. There is ONE shared geometric model in a Pinia store — the single source of truth. Each 2D view is a projection of that model onto a plane, and the 3D preview is a render of the same model. Editing in any view mutates the model; all other views and the 3D preview update reactively. Do not implement per-view drawing state.
Curve constraint (non-negotiable)
Curved walls are circular arcs only — stored as centre point, radius,
start angle, end angle. Never Bézier or spline curves. Rationale: a wall's
layers are offsets of its centreline, and offsetting a circular arc is exact
(concentric arcs, radius ± offset) while offsetting a Bézier has no exact
solution. This property is what keeps 2D layers, the section view and the 3D
extrusion consistent with each other. A straight wall is the degenerate case
(radius = ∞) — model both through one Wall type with an optional arc, and
handle the two cases in the geometry layer, not in the UI.
Domain model
- Unit: millimetres, integers. Snap-to-grid (configurable, default 50 mm).
- Wall: centreline (straight segment OR circular arc), height, thickness, and an ordered list of layers.
- Layer: a slice of a wall's thickness with a thickness value, a label (e.g. "facade brick", "insulation", "air gap", "block"), and a colour. A layer's footprint is a rectangle (straight wall) or an annular sector (curved wall).
- Opening: rectangular or arched cut-out in a wall (door, window), positioned by distance along the centreline and height above floor level.
- Dimension: an annotation linking two model points, showing the measured value plus an optional free-text description. For arcs, expose both chord length and developed (arc) length.
Features
- Drawing — a single brush tool producing simple shapes: rectangle, angle/polyline, arc (three-point or centre-radius — pick one and state which). No other drawing modes.
- Layers & materials — assign a label and colour to each wall layer; colours render in 2D views and in the 3D preview.
- Dimensions — place dimension lines; the measured value is computed from the model (never hand-typed), the description is editable text.
- 3D preview — Three.js. Orbit, pan, zoom. Preview only: no editing in 3D.
- Persistence — export the full project to a
.jsonfile and re-import it to resume work. Include aschemaVersionfield. No backend, no database.
Rendering
- 2D: SVG. Arcs use the native
Apath command; layer boundaries are concentric arcs sharing the centreline's centre point. SVG is chosen for hit-testing, selection and crisp dimension annotations at any zoom. - 3D: Three.js extrusion. Build each layer's horizontal footprint as a
THREE.Shape(rectangle for straight walls, annular sector viaabsarcfor curved walls), thenExtrudeGeometryvertically by the wall height. One code path serves both wall types. - Openings in 3D: do NOT use CSG/boolean subtraction. Split the wall into horizontal bands (below the opening, the opening band split into left and right segments, above the opening) and extrude each band separately. Arched openings: approximate the arch head by stacking thin bands.
- Curved walls in elevation views (front/side): render the orthographic projection, which is foreshortened by design. Show the true developed length in the inspector panel so the user is never misled by the projection.
Tech stack
Vue 3 + Nuxt (latest stable), Nuxt UI for all interface elements, Pinia for state, Three.js for the 3D preview, SVG for 2D.
UI constraints
Deliberately sparse. One tool palette with the brush and shape choices, a view switcher, an inspector panel for the selected element, and save/load. Nothing else. If a feature is not listed above, do not add it.
Tooling (MCP)
context7— fetch current docs for Nuxt, Nuxt UI, Pinia, Three.js before writing code against their APIs. Do not rely on memorised APIs.nuxt-remote— for all Nuxt-specific work.nuxt-ui-remote— for all Nuxt UI component work.serena— for file navigation and editing.chrome-devtools— verification gate: after each milestone, load the app, exercise the feature, and confirm zero console errors before moving on.
Out of scope
Despite the name, SketchBIM is a drawing tool, not a BIM authoring platform: no IFC or model-exchange interoperability, no object classification standards, no quantity take-off. Also excluded: structural calculation, multi-storey buildings, collaboration, authentication, printing/PDF export, non-circular curves.
Completion criteria
- Drawing a wall in the top view makes it appear correctly in the front, side and section views, and in the 3D preview, with no manual sync step.
- A curved wall's layers remain parallel and correctly ordered along the whole arc, in the section view and in 3D — no gaps, no overlaps.
- A curved wall renders as a genuinely curved solid in 3D, not as a straight approximation between endpoints.
- An opening placed in a curved wall follows the curve and leaves clean geometry above and beside it.
- Wall layers render with their assigned colours in the section view and 3D.
- Dimension values update automatically when the underlying geometry moves.
- Export → reload the page → import reproduces the project exactly.
- Verified in a real browser via
chrome-devtools; console is clean.