Panelario — parametric 3D panel/façade designer (built on three.js r183)

Hi all :waving_hand:

I’ve been building Panelario — a browser-based parametric designer for
architectural panels and façades (perforated, embossed, sculpted, custom shapes).
Runs entirely client-side on three.js r183.

Currently at v0.9.8 — pre-1.0, actively iterating, feedback is gold right now.

:link: Live viewer (free, no signup): Panelario Viewer 0.9.8
:globe_with_meridians: Project site: https://panelario.com

What it does

  • Parametric pipeline: shape → pattern (noise / image) → relief
    (heightmap displacement) → panelize / wall-projection / framing
  • Boolean cuts via Manifold + Clipper2 (WASM), live in the browser
  • Exports: STEP / DXF / SVG / glTF / OBJ (STEP via OpenCascade.js WASM)
  • WebXR AR viewing, path-traced previews (three-gpu-pathtracer)
  • RAL-based material system, env-map relighting, custom textures

three.js bits that were fun/painful

  • Mask cutting on curved walls — tessellated heightmap vs. exact Clipper-ring
    boolean cuts (settled on a hybrid: live preview = heightmap, export = exact rings)
  • Splitting “editor mode” (raw mesh prep) from “studio mode” (PBR materials +
    lighting) without rebuilding the scene graph each toggle
  • Keeping a ~50k LoC single-file viewer responsive while the geometry pipeline
    grew

Status / honesty bit

Viewer is free and will stay free. The full editor (project saving,
advanced exports, manufacturer features) is a paid SaaS — flagging that
upfront since it sometimes comes up. Still pre-1.0, so things move.

Happy to dig into any of the three.js internals if anyone’s curious.
Feedback very welcome :folded_hands:


Built with Claude Code.

4 Likes