-
-
User-generated 3DStreet scene showing redesign intersection and approaches for traffic calming
-
User-generated scene showing road diet and mid-block crosswalk
-
User-generated scene showing a redesign concept for Telephone Road enhanced with Kontext Pro Flux img-to-img model
-
User-generated scene of a redesigned Main Street concept
Inspiration
As a street safety advocate in San Francisco and Sierra Club board member, I experienced firsthand the frustration of trying to communicate spatial design concepts to city staff and elected officials. Traditional engineering tools cost thousands of dollars and require specialized training, creating barriers for community participation in urban planning. Meanwhile, existing 2D tools like Streetmix helped with cross-sections but couldn't convey the full spatial impact of proposed changes.
What it does
3DStreet is a browser-based urban design application that enables anyone to create detailed 3D visualizations of street improvements without expensive software or technical expertise. Users can:
- Design complete street scenes using drag-and-drop tools with realistic 3D models of vehicles, infrastructure, and street furniture
- Place designs in real-world context by importing satellite imagery, 3D building data, and terrain from Google Maps and OpenStreetMap
- Experience designs immersively using WebXR to view proposals in virtual reality or augmented reality directly on mobile devices
- Collaborate in real-time by sharing designs via simple URLs, enabling community feedback and stakeholder review
- Export professional deliverables including high-resolution images and 3D models for further processing
The tool bridges the gap between community vision and technical implementation, making urban design accessible to advocates, students, and professionals worldwide.
How we built it
3DStreet is built on A-Frame and three.js, leveraging the open web for cross-device compatibility. The core architecture uses:
- Procedural street generation: Custom algorithms that convert JSON street definitions into detailed 3D geometry
- Entity-Component-System (ECS): Modular design allowing users to mix and match street elements by leveraging A-Frame's ECS
- Real-world integration: APIs connecting to Google 3D Tiles and OpenStreetMap for geographic context
- WebXR support: Native VR/AR capabilities for on-site design review
- AI Assistance: Users who don't feel comfortable navigating 3D interfaces can use the in-app AI Assistant to generate, modify and create snapshots and reports with an LLM style chat interface powered by Gemini 2.5
Challenges we ran into
3D Tiles Elevation: A minor but important sticking point was the ability for users to have their desired location's 0m ground topographic elevation to be the three.js origin 0,0,0 which required some tricky calculations using both the Elevation Service API and a digitized geoid model running as a GCP cloud function. https://github.com/3DStreet/3dstreet/blob/main/public/functions/index.js#L12
Creating semantically-aware and dynamic street design tools is challenging: We have a big task on our plate to manage and iterate on the data structure for detailed street geometry while also implementing the rendering and editing thereof. Creating real-time street updates as users modify parameters involved complex coordinate transformations and intersection calculations that had to account for real-world constraints like turning radii and cross walk locations. Rendering detailed urban scenes with hundreds of 3D objects while maintaining reasonable performance across devices requires constant work.
User interface design for editing in 3D: Creating user interfaces that simplify urban infrastructure design is hard: even simple concepts like “editing a corner radius” can be challenging to reduce down into clear and concise feature development milestones. (For example, a “corner radius” for an intersection has many different relevant radii such as inner curb, corner island placement location and radius, and effective total turning radius. Some users wish to control all, while others want to modify one and have others magically update, etc.) Further compounding these challenges are real-world contexts with elevated or inclined surfaces, whether streets with inclines or crowned roadway surfaces.
Accomplishments that we're proud of
- 20,000+ designs created by users worldwide
- Used in university and K-12 curricula for urban planning education
- Adopted by advocacy groups in 5+ countries for community engagement
- Dozens of open-source contributions from community developers
What we learned
Through user interviews with over 100 planning professionals and advocates across 25 countries, I discovered that accessibility trumps feature completeness. Users consistently chose our browser-based tool over expensive desktop CAD software because they could share designs instantly via URL and collaborate in real-time without software installation barriers.
The most surprising insight: over half of our users come from the Global South, where expensive proprietary tools create significant equity barriers in infrastructure planning.
What's next for 3DStreet: Create Street Designs in 3D Maps
Our vision is to make 3DStreet the go-to platform for collaborative urban design worldwide. We're focused on two key areas: enhancing professional capabilities while keeping the tool accessible to everyone.
- Professional-grade tools: We're developing advanced editing features, precision measurement tools, and industry-standard import/export capabilities to serve planning professionals who need technical accuracy for formal submissions.
- Deeper real-world integration: By incorporating terrain data, live traffic patterns, and enhanced geospatial features, designs will be more grounded in actual site conditions and usage data.
- Expanded collaboration: Real-time multi-user editing and structured community feedback systems will transform how planning teams work together and engage with the public.
- Global accessibility: With touch-optimized interfaces, multilingual support, and guided workflows, we're removing barriers for users worldwide, particularly in the Global South where our impact has been strongest.
The ultimate goal is creating a sustainable, community-driven platform that democratizes urban design while meeting the needs of both grassroots advocates and planning professionals.
Log in or sign up for Devpost to join the conversation.