MOD21 - 3D Building Configuration
MOD21 is an interactive 3D configurator for modular building systems that allows users to plan, visualize and customize architectural structures in real-time. The application guides users through a structured workflow from initial planning to detailed visualization and documentation.
Motivation
Traditional architectural planning tools are often complex, expensive, and require specialized training. MOD21 aims to democratize the building design process by providing an intuitive web-based interface that allows non-specialists to create and customize modular building structures. By focusing on modular components, the system enables quick iterations and visualizations that would typically require significant time and expertise in conventional CAD software.
The project was primarily developed and optimized for tablets to ensure a user-friendly experience on mobile devices. The application is available completely offline so that users can work even without an internet connection. This was also important because the app is used at various trade fairs and events where an internet connection is not always available.
Features
The MOD21 configurator offers a comprehensive workflow with several key stages:
- Planning: Users can select from different building types and usage scenarios to establish the basic parameters of their project.
- Modeling: The core 3D environment where users can arrange, stack, and customize modular building blocks to create their desired structure.
- Customization: Detailed options for facades, rooftops, balconies, and staircases that adapt to the building’s structure.
- Visualization: High-quality 3D rendering of the configured building with realistic materials and lighting.
- Exposé Generation: Automatic creation of project documentation including key metrics, visualizations, and location data.
- Tablet Optimization: Enhanced performance and usability on tablet devices.
- Offline Mode: The configurator can be preloaded and used offline, allowing users to work without an internet connection.
All changes happen in real-time, allowing users to immediately see the impact of their design decisions. The system maintains an internal representation of the building’s structure, ensuring that configurations remain architecturally sound.
Technology
MOD21 leverages modern web technologies to deliver a powerful yet accessible 3D configuration experience:
- Svelte & SvelteKit: The core framework providing reactive UI components and routing
- ThreeJS & Threlte: 3D rendering engine and its Svelte integration for managing the complex 3D scene
- TailwindCSS & Skeleton UI: Utility-first CSS and component library for consistent styling
- Camera Controls: Advanced camera management for intuitive navigation in 3D space
- GLB Pipeline: Custom tooling for processing and optimizing 3D models for web delivery
The application follows a component-based architecture, separating concerns between the 3D models, configuration UI, and business logic. This separation allows for easier maintenance and extension of the system.
Our custom model pipeline optimizes the workflow for adding new building components, automatically generating Svelte components from GLB files. This makes it straightforward to expand the system with new architectural elements.