Smart Home 3D Webapp

Control your home like a Video Game served from your local pi

Public Chat
Similar projects worth following
See your 3d rooms model real time colored with your temperature sensor, click on the 3d light bulb model to switch the real light on, see the light switched on in the 3d model as well, see if windows are open by seeing an actual 3d window model open or closed,...
While Video Games have reached incredible realism, Smart Home applications still struggle with 2D apps. Each IoT device suggest its own isolated app.
This project's idea is very modest, it does not provide the best 3d web app for home automation, rather collects different pieces of frameworks enabling each of us to customize his 3d interactions with his own devices.
The main idea is to model items in blender (or use existing ones provided here) that have animations mapped to properties names. Thanks the the .glTF export and import in three.js, those items become interactive through mouse clicks and gets their properties updated from external events such as connections to mqtt and hue gateway.

Project website documentation :

If you would like to get support, give feedback or discuss new ideas related to this project ?

It's possible to directly discuss on the discourse forum

discourse forum:


Many open source home automation frameworks start to get popular, but few care about 3d interactions while it has potential to be very user friendly:

  • Full home status in singe blink !
    • Natural feel as the placement of the devices in the model follows your actual home geometry.
  • Any device control is one touch away !
    • More devices, no problems, zoom in and out without loosing focus, no 2d navigation from page to page !

Community shared .glTF interactive items can make such framework easily usable for everyone.

IoT device suppliers could provide an mqtt interface API and a glTF model with animations.

hue lights and mqtt devices in sync with the 3d Model

Github repo

First time usage

  1. host this project on your local raspberry pi or see 'Local host vs Remote host' section on how to use the live demo
  2. create your own glTF model from blender (optional)

activate hue bridge connection

  1. adjust the light names to match your hue lights names
  2. press the Hue Gateway authorisation button (on the real device)
  3. Click on the 3d model of the hue gateway
  4. An alert will apear on the screen to wait for confirmation
  5. The user creation will proceed and the username will be stored as local storage (ctrl+j in chrome to oben the debug window)

activate mqtt connection

  1. adjust the mqtt topic names to match your mqtt devices
  2. install a mosquitto version with websocket support
  3. Click on the 3d model of the mosquitto gateway

Switching on a real light with power logging

We see in this gif demo above a home 3d model augmented with interactive mesh items. Some meshes represent light bulbs and generate events when the user clicks on them. Those events are handled by a hue light client that interacts with the real hue gateway. The hue client publishes as events the actual state of the switched light, and that state is updated by the mesh bulb color and the associated 3d light.

As a demonstration for the reaction time of the real light switching on and off, we can see in the gif animation the power consumption log of the light switched. This log comes from a shelly 2.5 device with power monitoring capabilities. This measure device is itself powering up the hue light. Note that the slow power up and down ramp are due to the hue effect of slow variation when switching on and off.

Hue lights and lightgroups usage from the 3d webapp

see the full details on the project log entryhue-lights-and-lightgroups-usage-from-the-3d-webapp


Boiler plates examples linked below

Examples and explanation from the github
All boilerplate examples embedded in a single

3d objects properties

Manipulation of properties such as mesh animation and color. This control can operate from an external interface of through internal 3d mouse events.

call to modify a property:

send_custom_event("three_color",{name:"Kitchen", val:0.3});

3d mouse events

Events such as hover, click and long press. These events uses rays to match the 3d objects meshes.

user handling of 3d mouse events:

window.addEventListener( 'mesh_touch_start', onMeshTouch, false );

function onMeshMouseDown(e){    console.log(`Mesh Touch on ${}`);

3d slider control

On activation of the control, new objects such as a slider pop up in the scene and takes over the mouse control. While the user is acting on the control, the control is producing events. The whole cycle can be as short as the user touching the 3d element, the slider popup with the bullet already under the user's finger, the user shifts slightly...

Read more »

  • Hue lights and lightgroups usage from the 3d webapp

    Wassim01/04/2020 at 14:07 0 comments

    demo light and group dimming

    We see in this demo the user controlling the lights from both lightgroups and individual lights. Note that such functionality in some other apps would require to switch to another screen that offers the individual lights of a given group while with this webapp, it is possible to click on any individual light or light group from one single view.

    Note : This project is not related to the hue devices supplier and is a simple user of the provided API.

    Hue features

    • All individual lights and lightgroups visible and usable on the same view (not possible with other hue apps)
    • Correct display of light status. On off and grayed when not reachable (other apps might show out of reach lights same color as the ones switched on)
    • Click/Touch light to control on-off
    • Cilck/Touch lightgroup to control on / off (using any_on)
    • hold and use 3d slider to adjust the light brightness (lights and groups)
    • hold and control allows to dim light up gradually out of zero without a bang in case of previous dim state was high, and it is possible to jump to previous dim state by switch on with touch or click (other apps dissociate switch on and dimming functions, so that if left at high dim level, you have to switch it on on full brightness first before being able to dim it lower)
    • 3d light bulbs and 3d light brightness vary in sync when controlling the 3d slider (groups slider on exit only)
    • webapp lights kept in sync even when used externally. Configurable polling is used (default is 2 sec), event hue_all_lights only sent on changes

    Hue config in blender

    configuration of hue light name in blender Light bulb object Custom properties.

    Hue events application code

    lights broadcast their state on startup and as a feedback when updated from javascript

    Hue light groups

    • Lightgroup are optional and the individual light items configuration does not differ depending on if they are part of a light group or not.
    • only the hue gateway lightgroup is being used. That means a lightgroup has to be created with the hue app before it can be used in this webapp.

    Indiviual lights have to be attached to a parent mesh that have these custom properties

    • a lightgroup shall also have a hue field, the only differerence is that it has no blender light item and does have a type:lightgroup property.
    • as the hue gateway allow it, a normal light and a lightgroup can have the same name.

View project log

Enjoy this project?



Similar Projects

Does this project spark your interest?

Become a member to follow this project and never miss any updates