Web massing tool with OSM integration
Sketch, analyze, and visualize massing models directly in the browser - using real-world context from OpenStreetMap.
Overview
Online Massing Modeling Tool with 3D Visualization and Site Context
We developed a browser-based 3D massing tool that allows users to create and analyze conceptual building forms directly on a real-world map. The application uses OpenStreetMap for site context and 3D rendering via Three.js for fast, interactive modeling — ideal for early-stage urban design and feasibility studies.
- Product vision
- UI/UX design
- 3D massing engine
- OSM integration
- Mapbox integration
- Web application
Problem
Designers teams lacked an easy-to-use online tool for early massing studies with real-world site context. Existing solutions were either desktop-only, too complex, or disconnected from geographic data - making quick feasibility modeling difficult.
Solution
The tool allows users to draw and edit basic building forms directly on top of OpenStreetMap data, adjusting parameters like height, footprint, and orientation. The massing geometry is rendered with Three.js, providing real-time feedback and intuitive manipulation in the browser. Users can analyze views, context, and export geometry for further design development.
Final solution includes:
- Rectangle massing creation
- Line-based creation
- Free-form creation
- Editing tools
Technologies used
JavaScript
Three.js
mapbox API
OpenStreetMap API
Process
Use case discovery
Collaborated with the client to identify typical massing workflows and user goals for early design stages.
Map & context integration
Integrated OpenStreetMap data and terrain overlays for accurate location-based modeling.
3D engine development
Built a lightweight modeling engine with snapping, extrusion, and editing tools using Three.js.
Design
Created a clean, minimal UI for drawing, adjusting, and organizing massing blocks.
Testing
Delivered a responsive web app tested across browsers and devices for public or internal use.
Results
by 60%
Reduced time to create conceptual massing models
Highlights:
- Browser-based - no installation required
- Real-world map context using OSM
- Intuitive 3D modeling and export for downstream workflows
- Ideal for architect, planners and real estate analysts