2.4K ·GitHub
What is this?
A pure front-end floor plan and interior design tool: you lay out furniture, knock down or add walls, and measure dimensions on a 2D plan, then flip to a Three.js 3D scene for a bird's-eye view or a first-person walkthrough.
A pure front-end floor plan and interior design tool: you lay out furniture, knock down or add walls, and measure dimensions on a 2D plan, then flip to a Three.js 3D scene for a bird's-eye view or a first-person walkthrough.Is this a web app I install, or just a file I open?It is a single static HTML file with zero build steps - the whole app is 'index.html', so opening it in any browser is enough to use it.
It is a single static HTML file with zero build steps - the whole app is 'index.html', so opening it in any browser is enough to use it.How do I get it running?Open 'index.html' directly in your browser, or serve the folder from any local static server if you'd rather not use the file:// protocol.
Open 'index.html' directly in your browser, or serve the folder from any local static server if you'd rather not use the file:// protocol.Do I need a framework or build tools to work with the code?No - it's plain HTML, CSS and JavaScript with no framework and no build step; the only external piece is Three.js r160, loaded via a CDN.
No - it's plain HTML, CSS and JavaScript with no framework and no build step; the only external piece is Three.js r160, loaded via a CDN.Can I load my own floor plan, or only the built-in demo?There's no import wizard for arbitrary house shapes - you customize it by editing the ROOMS, WALLS/WINS, MATS and LIB data objects right inside 'index.html' to swap in your own layout and furniture.
There's no import wizard for arbitrary house shapes - you customize it by editing the ROOMS, WALLS/WINS, MATS and LIB data objects right inside 'index.html' to swap in your own layout and furniture.Does it work completely offline?Mostly - your plan autosaves locally - but Three.js itself is fetched from the jsDelivr CDN, so you need internet access the first time you open the 3D scene.
Mostly - your plan autosaves locally - but Three.js itself is fetched from the jsDelivr CDN, so you need internet access the first time you open the 3D scene.Where does my design data go?Nowhere but your own browser - the whole app saves its state in localStorage, with no server involved.
Nowhere but your own browser - the whole app saves its state in localStorage, with no server involved.How much furniture does the library include?Over 60 pieces spanning bedroom, living room, dining/kitchen, bathroom, appliance, and study/leisure categories, all draggable from the left-side library panel.
Over 60 pieces spanning bedroom, living room, dining/kitchen, bathroom, appliance, and study/leisure categories, all draggable from the left-side library panel.Can I export or share my design?Yes - you can export the plan as a PNG image, or export/import the full plan as JSON to move it between browsers or machines.
Yes - you can export the plan as a PNG image, or export/import the full plan as JSON to move it between browsers or machines.Does it support languages other than Chinese?Yes, a Chinese/English toggle sits in the top bar - it defaults to Chinese and remembers whichever language you pick.
Yes, a Chinese/English toggle sits in the top bar - it defaults to Chinese and remembers whichever language you pick.What's the first-person walkthrough mode like?You move with WASD plus the mouse on desktop (a virtual joystick on touch devices), can sprint with Shift, and can click doors to open or close them as you explore.
You move with WASD plus the mouse on desktop (a virtual joystick on touch devices), can sprint with Shift, and can click doors to open or close them as you explore.What are similar projects?bible-strong-avatar-lab, aetherviz-master, PCB_lightgraph_Portable, tweakcn, JIZURA, three.js, paper-aquarium, GDevelop
bible-strong-avatar-lab, aetherviz-master, PCB_lightgraph_Portable, tweakcn, JIZURA, three.js, paper-aquarium, GDevelopWhich topics is it in?design-tools, html5, no-code, localization, threejs, webgl, offline-first, svg, i18n, 3d, multilingual, design
design-tools, html5, no-code, localization, threejs, webgl, offline-first, svg, i18n, 3d, multilingual, design