BJS RoomDesign

Interactive 3D room design tool built with BabylonJS. Load furniture models into a photorealistic room, customize materials, rearrange pieces with gizmos, and export screenshots.

Live Demo

Features

• 3D Room Viewer — PBR-rendered diorama with HDR environment lighting, shadow maps, and lightmap baking
• Furniture Catalog — XML-driven model list; add multiple instances of any item
• Material Switcher — per-model material variants (fabrics, carpets) swappable at runtime
• Floor Changer — 7 floor texture presets cycled via button or keyboard
• Transform Gizmos — drag (X/Z axes) and rotate (Y axis) with snap; adapts scale to portrait/landscape
• Auto-Rotate — idle camera rotation toggle
• Screenshot Export — 1800×1800 JPEG via BabylonJS render target
• Responsive — portrait/landscape camera adjustment; touch and mouse input (PEP pointer events polyfill)
• PWA-ready — Apple/Android icons, theme-color, mobile web-app meta tags

Tech Stack

Package	Version
BabylonJS	^9.10.1
babylonjs-loaders	^9.10.1
babylonjs-gui	^9.10.1
@babylonjs/havok	^1.3.12
pepjs	^0.5.3
Bootstrap	5.0.2 (CDN)

Project Structure

├── index.html               # App shell, UI overlay elements
├── js/
│   ├── main.js              # Scene setup, model loading, interactions
│   └── browser-detector.js  # Touch/desktop detection
├── css/
│   └── main.css             # UI styles
├── xml/
│   └── main.xml             # Furniture catalog (uid, filename, materials, price)
└── resources/
    ├── models/              # GLB models + lightmap textures
    │   ├── Diorama/         # Base room mesh
    │   ├── Sofa1/
    │   ├── Chair1/
    │   ├── Chair2/
    │   ├── Table1/
    │   ├── Carpet1/
    │   ├── Pouf1/
    │   ├── FloorLamp1/
    │   └── Bureau1/
    ├── textures/            # Fabric (fabric1-5), carpet (carpet1-7), floor (floor1-7) JPEGs
    ├── env/                 # HDR environment (.env prefiltered)
    └── images/              # Icons, UI assets

Setup

npm install

Serve with any static HTTP server (required — BabylonJS asset loader uses XHR):

# Example with npx
npx serve .
# or
npx http-server .

Open http://localhost:3000 (or the port your server reports).

No build step. Scripts loaded directly from node_modules/.

Adding Models to the Catalog

1. Place the GLB file and optional lightmap JPEG inside resources/models/<ModelName>/.
2. Add an <item> entry to xml/main.xml:

<item>
  <uid>010</uid>
  <filename>ModelName</filename>
  <extension>glb</extension>
  <title>Display Name</title>
  <description>Short description.</description>
  <icon>thumbnail.jpg</icon>
  <price>0 €</price>
  <materials>
    <material>fabric1.jpg</material>
  </materials>
  <lightmap>ModelNameLightingMap.jpg</lightmap>
  <lightmap_intensity>1.3</lightmap_intensity>
</item>

3. Place the icon image in resources/images/.
4. For material swapping to work, the 3ds Max / Blender material name must include the word "change".

Keyboard Shortcuts

Key	Action
+ or M	Open model selector
F	Cycle floor texture
I	Toggle info panel for selected model
Del / Backspace	Delete selected model
S	Take screenshot
Esc	Close all panels

Performance Notes

• MSAA samples auto-scale: 4× above 40 FPS, 1× below.
• Shadow map resolution: 512px with PCF medium quality.
• IDB storage enabled for asset caching across sessions.