BabylonJS 3D Interactive
BJS RoomDesign — Interactive 3D Room Designer
Interactive 3D room design tool built with BabylonJS. Load furniture, swap materials at runtime, reposition with gizmos, cycle floor presets, and export 1800×1800 screenshots.
Interactive 3D room design tool — load furniture into a photorealistic diorama, customize materials, rearrange pieces with transform gizmos, and export screenshots.
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 fabric and texture variants swappable at runtime
- Floor Changer — 7 floor texture presets cycled via button or
Fkey - Transform Gizmos — drag (X/Z axes) and rotate (Y axis) with snap; adapts to portrait/landscape
- Screenshot Export — 1800×1800 JPEG via BabylonJS render target (
Skey) - Auto-Rotate — idle camera rotation toggle
- Responsive — touch and mouse input (PEP pointer events polyfill), portrait/landscape camera adjustment
- PWA-ready — Apple/Android icons, theme-color, mobile web-app meta tags
Keyboard Shortcuts
| Key | Action |
|---|---|
+ / 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 |
Adding Models
- Place GLB + optional lightmap JPEG in
resources/models/<ModelName>/ - Register in
xml/main.xmlwith uid, filename, title, materials, and lightmap - Material swapping requires the 3DsMax/Blender material name to include the word "change"
Tech Stack
| Package | Version |
|---|---|
| BabylonJS | ^9.10.1 |
| babylonjs-loaders | ^9.10.1 |
| babylonjs-gui | ^9.10.1 |
| @babylonjs/havok | ^1.3.12 |
| Bootstrap | 5.0.2 (CDN) |
Performance Notes
- MSAA samples auto-scale: 4× above 40 FPS, 1× below
- Shadow map: 512px PCF medium quality
- IDB asset caching across sessions