I would like to introduce this Smart Home 3D web app based on Three.js and gltf import. I would like to get feedbacks about your thoughts.
I would like help to share it as I feel many like me would be looking for such examples before starting such projects.
A short description
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.
This 3d web app is connected to the real bulb that dims in sync with the 3d one.
All config is done directly from Blender before the GLTF export
Temperature Sensors on floor color
See how warm is each room or if the heating is on or off, full house status in one view, no numbers just colors.
the mqtt topics are also configured in Blender Custom properties
In a recent version, I added an outline effect to improve usability, as the user would know which elements are actually interactive, for example the devices that are out of reach would not appear as the active ones
This webapp had a Hackaday citation
For more details about how this work, I created another post that links to simple isolated examples