Three.js-3d-room-designer tackles a common pain point in 3D product configurators: how to resize models realistically without distorting their geometry or textures. Instead of just scaling models naively, this project uses morph targets to reshape product models dynamically, preserving their proportions and texture mapping. This subtle technical choice makes a big difference in the final visual quality and usability of the configurator.
What the threejs-3d-room-designer project does and how it is built
At its core, this repo combines a 2D floor plan editor with a 3D room configurator, all wrapped in a React app that manages interaction modes cleanly. Users can draw and modify walls and corners in a 2D plan view, then switch to a 3D view to place and orient furniture and product models. The app supports dynamic dimension changes on these products using morph targets rather than simple scaling, which is key to avoiding visual artifacts common in naive resize implementations.
The architecture separates concerns into three distinct interaction modes: floor plan design, room layout, and product configuration. This clean separation helps keep the UI and codebase manageable despite the complexity of switching between 2D editing and 3D modeling.
Under the hood, the project leverages Three.js for 3D rendering and React for UI composition and state management, bundled as a React app. The product configurator supports per-part material and texture assignment as well as selectable style variants, adding to the flexibility and realism of the designs.
Why morph target-based resizing stands out as a technical strength
Most 3D configurators resort to simple scale transforms when resizing models, which leads to distorted proportions and stretched textures. This repo’s use of morph targets—a feature of Three.js that allows predefined vertex positions to be interpolated—lets it reshape models smoothly and realistically.
With morph targets, each dimension change corresponds to a morph influence that deforms the mesh geometry according to artist-defined shapes rather than uniform scaling. This preserves the integrity of the model’s surfaces and texture mapping.
The tradeoff is complexity: preparing morph target data requires more upfront modeling work, and the runtime system must manage morph influences alongside traditional transforms. However, this approach yields a much higher fidelity visual result, which is important for product configurators where customers expect accurate previews.
The codebase reflects this tradeoff with a clear pattern separating morph target handling from other transformations. The logic for updating morph influences based on user input is encapsulated, making the code maintainable and extensible.
Explore the project
The main entry point is a React app combining Three.js components for 3D rendering and a custom 2D floor plan editor. Look at the README for an overview of features and conceptual architecture.
The source code organizes floor plan editing, room layout, and product configuration into separate modules or components, reflecting the interaction modes. Inspecting these components reveals how the app switches contexts without mixing concerns.
Product models are stored with morph target data, which can be explored in the Three.js scene setup files where morph influences are controlled. This is the heart of the dimension-changing system.
While there are no explicit installation or quickstart commands in the README, the project is bundled as a React app, so standard React development workflows apply (npm/yarn install and start commands, presumably).
Verdict
This repo is a solid example of combining 2D and 3D editing in a single React-based interface with a focus on realistic product configuration. The morph target resizing approach is the main technical highlight, offering a useful pattern for anyone building 3D configurators who wants to avoid the common pitfalls of naive scaling.
That said, the project assumes some upfront asset preparation (models with morph targets) and a moderate level of Three.js and React expertise to extend or customize. It’s less a plug-and-play tool and more a reference implementation showcasing a clean architecture and a practical morph target pattern.
If you’re building a product configurator or room designer and care about realistic model deformation and texture integrity, this repo is worth a close look. For simpler or less precise needs, naive scaling might still suffice and be easier to implement.
The code is surprisingly clean for a combined 2D/3D editor and demonstrates thoughtful separation of concerns. Exploring it can provide valuable insights into managing complex interaction modes and morph-driven resizing in Three.js within a React app.
Related Articles
- shadcn/ui: building your own customizable React component library from source — shadcn/ui offers customizable React components by providing source code for deep integration and modification. It’s a fo
- ComfyUI: modular visual workflows for diffusion model experimentation — ComfyUI offers a graph/node interface for building complex diffusion model workflows offline, blending modularity with f
- Flowise: visual low-code AI agent builder with a modular TypeScript monorepo — Flowise offers a visual drag-and-drop low-code platform to build AI agents and LLM apps, with a Node.js backend and Reac
- CopilotKit: Building dynamic agentic UIs with the AG-UI protocol — CopilotKit introduces the AG-UI Protocol, enabling AI agents to dynamically render and update UI components in React app
→ GitHub Repo: CodeHole7/threejs-3d-room-designer ⭐ 446 · HTML