CodeHole7/threejs-3d-room-designer: React-Based 3D Room Planner

CodeHole7/threejs-3d-room-designer: React^{↗ Bright Coding Blog}-Based 3D Room Planner with 2D Floorplan Editing

Building interactive 3D room configurators presents a persistent challenge for frontend developers: bridging intuitive 2D design workflows with real-time 3D visualization while maintaining product customization logic. Most solutions force a choice between simplified 2D planners that lack spatial depth, or complex 3D engines that overwhelm non-technical users. CodeHole7/threejs-3d-room-designer addresses this gap directly, combining React.js with Three.js to deliver a dual-view room planner and product configurator that operates in both dimensions simultaneously.

This open-source project, maintained by a solo developer reachable via Telegram (@GalaxyDev1993), demonstrates how modern web graphics APIs can serve practical interior design and e-commerce applications without requiring native installation or proprietary plugins.

What is CodeHole7/threejs-3d-room-designer?

CodeHole7/threejs-3d-room-designer is a browser-based 3D room configuration tool built on React.js and Three.js. The project ships as a bundled React application and provides two core interfaces: a 2D floorplan editor for architectural layout, and a 3D view for spatial visualization and product placement. A live deployment is available at threejs-room-configurator.netlify.app.

The repository holds 454 stars and 98 forks as of its last commit on March 20, 2024. Its primary language is HTML, reflecting the bundled output structure rather than the React source. Notably, the project carries no specified open-source license — a critical consideration for commercial adoption that potential users must verify with the maintainer directly.

The tool occupies a specific niche in the web-based 3D ecosystem: it is not a general-purpose Three.js scene editor, nor a CAD replacement, but rather a domain-specific configurator targeting furniture retailers, interior design services, and real-estate visualization. Its relevance stems from the growing demand for browser-based product customization in e-commerce, where customers expect to visualize dimensional and material changes without leaving the purchase flow.

The maintainer's note about the "react-bundled one" suggests active evolution of the codebase, with potential alternative versions or build configurations available upon direct inquiry.

Key Features

1. FloorPlan Design (2D View)

The 2D floorplan editor enables direct manipulation of architectural geometry. Users can:

• Draw walls by mouse interaction to define room boundaries
• Move existing walls and corners to adjust proportions
• Delete structural elements when redesigning layouts

This operates as a genuine vector-based editing surface rather than a preset template system, giving users granular control over spatial dimensions. For developers integrating this into larger applications, the wall data structure likely maintains connectivity information (corner-to-wall relationships) that could serialize to standard formats.

2. Room Configuration (Dual-View Product Placement)

Products — represented as 3D models — can be added from a curated list and manipulated in both 2D and 3D views simultaneously. Users control:

• Position: Placement within the room coordinate system
• Orientation: Rotation around the vertical axis

The bidirectional editing is architecturally significant: changes in either view propagate to the other, requiring state synchronization between the orthogonal 2D projection and the perspective 3D camera. This suggests a shared scene graph or centralized state management layer (likely React Context or Redux given the React foundation).

3. Product Configuration (Per-Instance Customization)

Selected products expose three configurable property categories, all of which must be predefined during model design:

The use of morph targets for dimensional changes is particularly noteworthy — this preserves mesh topology and UV mapping integrity that simple scaling would distort, enabling realistic deformation of parametric furniture components like extendable tables or adjustable shelving.

Use Cases

Furniture E-Commerce Configurators

Online furniture retailers can embed this tool to let customers design room layouts with actual product dimensions, then customize finishes and sizes before purchase. The morph-based dimension system ensures that a "72-inch sofa" genuinely differs from its "84-inch" variant in structurally plausible ways, not merely stretched geometry.

Interior Design Client Collaboration

Designers can share interactive room plans where clients experiment with layouts independently. The 2D view lowers the barrier for non-technical users, while the 3D view validates spatial relationships — checking sight lines, traffic flow, and furniture scale against actual room proportions.

Real-Eate Pre-Visualization

Property developers can furnish unbuilt units with configurable product catalogs, letting buyers visualize their future space with accurate dimensions. The bundled React output simplifies integration into existing marketing websites without requiring separate 3D application deployment.

Custom Manufacturing Quotation Systems

Made-to-order furniture businesses can connect the configuration state directly to pricing engines: each morph dimension, material selection, and style variant maps to cost components and production parameters, generating accurate quotes from customer-driven designs.

Educational Tool for Spatial Design

Architecture and interior design programs can use this as a lightweight introduction to 3D spatial reasoning, with the 2D-to-3D correspondence helping students understand orthographic projection and perspective relationships.

Installation & Setup

The README does not provide explicit installation commands. Based on standard React project conventions and the "bundled version" description, the typical workflow would involve:

# Clone the repository
git clone https://github.com/CodeHole7/threejs-3d-room-designer.git
cd threejs-3d-room-designer

# Install dependencies (standard for React projects)
npm install

# Start development server
npm start

# Or build for production
npm run build

Important caveats from the source material:

• The current distribution is a bundled build, not source-available React components
• The maintainer explicitly requests contact via Telegram (@GalaxyDev1993) for inquiries, suggesting the public repository may not represent the complete development version
• No package.json, build scripts, or dependency list is visible in the README excerpt

For production integration, developers should verify:

1. Whether unbundled source access requires direct negotiation
2. Build output compatibility with target hosting environments
3. Three.js version and its implications for browser support matrices

The Netlify live demo confirms client-side rendering with no apparent server-side requirements, indicating static hosting compatibility.

Real Code Examples

The README contains no executable code snippets — only feature descriptions and screenshots. This section therefore documents what the architecture implies for implementation, rather than presenting copy-pasteable examples.

Implied Scene Initialization Pattern

Based on the React + Three.js stack and dual-view requirement, the application likely initializes separate renderers:

// Conceptual structure inferred from documented features
// Not extracted from README — represents typical implementation pattern

import { useRef, useEffect } from 'react';
import * as THREE from 'three';

function DualViewRoomPlanner() {
  const view2DRef = useRef();   // Orthographic camera, top-down
  const view3DRef = useRef();   // Perspective camera, orbit controls
  
  useEffect(() => {
    // Shared scene graph ensures synchronized state
    const scene = new THREE.Scene();
    
    // 2D: OrthographicCamera for floorplan editing
    const camera2D = new THREE.OrthographicCamera(...);
    const renderer2D = new THREE.WebGLRenderer({ canvas: view2DRef.current });
    
    // 3D: PerspectiveCamera for spatial visualization  
    const camera3D = new THREE.PerspectiveCamera(45, aspect, 0.1, 1000);
    const renderer3D = new THREE.WebGLRenderer({ canvas: view3DRef.current });
    
    // Both renderers reference identical scene object
    // Product meshes, wall geometries shared between views
  }, []);
  
  return (
    <div className="dual-view-container">
      <canvas ref={view2DRef} className="floorplan-view" />
      <canvas ref={view3DRef} className="spatial-view" />
    </div>
  );
}

Morph Target Configuration (Inferred)

The documented "morph internally" for dimensions suggests model loading with morph target support:

// Loader configuration for parametric products
const loader = new THREE.GLTFLoader();
loader.load('product-model.glb', (gltf) => {
  const mesh = gltf.scene.children[0];
  
  // Access morph targets predefined in model design
  const morphDictionary = mesh.morphTargetDictionary;
  const morphInfluences = mesh.morphTargetInfluences;
  
  // Set dimension variant by influence weight
  // 'width_80cm', 'width_100cm', etc. defined during modeling
  morphInfluences[morphDictionary['width_100cm']] = 1.0;
  morphInfluences[morphDictionary['width_80cm']] = 0.0;
});

Explicit disclaimer: These examples reconstruct likely implementation patterns from the feature descriptions. The README provides no actual code. Developers should inspect the bundled output or contact the maintainer for authoritative implementation details.

Advanced Usage & Best Practices

Model Preparation Pipeline

The README emphasizes that "all of these properties should be defined when design models." This imposes upstream modeling requirements that teams must account for in their asset pipeline:

• Morph targets must be authored in Blender, Maya, or equivalent before export
• Material groups require consistent naming conventions for runtime texture swapping
• Style variants need discrete mesh configurations or material collections

Teams should establish model specification documents that constrain designers to configurable parameters the runtime supports.

Performance Considerations

Dual-view rendering doubles GPU workload. For complex rooms, consider:

• Level-of-detail (LOD) meshes for 3D view while maintaining simplified geometry for 2D
• Frustum culling optimization, especially with many product instances
• Texture atlasing to reduce draw calls for material variants

State Persistence

The floorplan and product configuration state should serialize to JSON for:

• Save/load functionality
• URL sharing of room designs
• Backend integration for order processing

Integration Architecture

The bundled React output suggests embedding via iframe or build artifact inclusion. For tighter integration, source access (via maintainer contact) would enable component-level imports into existing React codebases.

Comparison with Alternatives

Honest assessment: CodeHole7/threejs-3d-room-designer occupies a middle ground — more customizable than SaaS alternatives for teams with React/Three.js expertise, but requiring more integration effort than turnkey solutions. The morph-based product configuration is a genuine technical distinction; the licensing uncertainty is a genuine risk.

FAQ

Q: What license applies to this project? A: No license is specified in the repository. Contact the maintainer (@GalaxyDev1993 on Telegram) before commercial use.

Q: Can I use this without React in my stack? A: The current version is React-bundled. Alternative builds may be available through direct maintainer contact.

Q: What 3D model formats are supported? A: Not explicitly documented. Three.js typically uses glTF/GLB; verify with the maintainer for confirmed formats.

Q: Is there server-side rendering support? A: The live demo uses client-side rendering. Server requirements are not documented.

Q: How do I define configurable products? A: Morph targets, material groups, and style variants must be authored during 3D modeling before runtime use.

Q: What's the browser support matrix? A: Dependent on Three.js version used. The bundled output likely targets modern WebGL-capable browsers.

Q: Is the project actively maintained? A: Last commit was March 20, 2024. Contact the maintainer for current development status.

Conclusion

CodeHole7/threejs-3d-room-designer delivers a focused, technically coherent solution for browser-based room visualization with genuine product customization depth. Its dual-view architecture and morph-based parametric products distinguish it from simpler 3D viewers or static 2D planners. The 454-star community interest validates its relevance, though the single-maintainer structure and unspecified licensing demand due diligence for production deployments.

This tool best serves React-experienced teams building furniture e-commerce, interior design platforms, or real-estate visualization where customers need to configure and spatially arrange products. The bundled distribution lowers initial integration friction but may constrain deep customization without source access.

Evaluate the live demo, inspect the GitHub repository, and contact the maintainer via Telegram for licensing and source access inquiries before committing to production use.

For related approaches to web-based 3D configuration, see [INTERNAL_LINK: three-js-product-configurators] for comparative tooling analysis.