3Dash

A 3D floorplan dashboard for Home Assistant. Load your own 3D model, map it to your smart home entities, and control everything from an interactive view in your browser.

Features

• 3D floorplan -- load a custom .glb model of your home and navigate it freely
• Light control -- toggle, dim, and color-pick lights directly from the 3D scene (supports on/off, dimmable, RGB, RGBW, and IR remote types)
• Wall displays -- render live sensor data (temperature, humidity, energy, etc.) on surfaces inside the model
• Network tubes -- animated tubes that visualize real-time network throughput
• Sun and weather -- sun position tracks your real location; optional rain/snow particle effects
• Side panel -- configurable cards for scripts, indicators, and graphs
• Config editor -- define lights, displays, shadow walls, and tubes from a built-in UI
• Onboarding wizard -- guided setup for first-time users
• Backup / restore -- export and import your full configuration as a ZIP
• Demo mode -- explore the dashboard without a Home Assistant instance
• PWA -- installable as a progressive web app with offline support
• Dark and light themes

Tech stack

React, TypeScript, Babylon.js, Vite, Home Assistant WebSocket API.

Getting started

Option 1 -- GitHub hosted version

Use the hosted version directly at https://kdcius.github.io/3Dash_webapp/.

No installation required. Your Home Assistant instance must be accessible over HTTPS for the WebSocket connection to work from the hosted page.

Option 2 -- Home Assistant add-on

The easiest way to self-host. Runs on the same machine as your Home Assistant instance.

Or manually:

1. In Home Assistant, go to Settings > Add-ons > Add-on Store.
2. Open the overflow menu and select Repositories.
3. Add https://github.com/kdcius/3Dash_webapp.
4. Install 3Dash from the store and start it.
5. Open http://<your-ha-ip>:8099 in your browser.

When running behind HTTPS, the add-on automatically uses wss:// for the WebSocket connection. If you use a self-signed certificate, your browser must trust it for the connection to work.

Option 3 -- Self-host on any machine

For advanced users who want to build and serve 3Dash themselves.

git clone https://github.com/kdcius/3Dash_webapp.git
cd 3Dash_webapp
npm ci
npm run build

Serve the dist/ directory with any static file server (Nginx, Caddy, etc.). For development with hot reload, use npm run dev instead.

Configuration

All configuration happens in the browser -- no config files to edit manually.

What	Where
Home Assistant URL, port, and token	Onboarding wizard or Settings
Location (for sun tracking)	Onboarding wizard or Settings
Theme, rendering, camera	Settings modal
Lights, displays, shadow walls, tubes	Config editor

Configuration is persisted in localStorage. The 3D model is stored in IndexedDB.

Project structure

src/
  babylon/       3D scene, model loading, lights, displays, tubes, sun, weather
  components/    React UI (HUD, modals, side panel, cards, forms, guided tour)
  pages/         Dashboard, config editor, onboarding
  services/      HA WebSocket client, config/settings persistence, storage
  contexts/      React contexts (demo mode, camera, theme)
  types/         TypeScript type definitions
  utils/         Color conversion helpers
public/          Static assets (default 3D model, fonts, icons, PWA manifests)
3dash-addon/     Home Assistant add-on (Dockerfile, nginx config, run script)

License

This project is provided as-is. See the repository for license details.