floor3d-card (aka Your Home Digital Twin)
Javascript Module for the Home Assistant visualization Card for 3D Models with bindings to entity states.
New Tutorial  |
Your First Card  |
|---|
Installation
The card is now accepted in the default repositories of HACS just search for floor3d in the HACS frontend section and install.
You can also download the compiled floor3d-card.js file from the latest release here (https://github.com/adizanni/floor3d-card/releases) and upload it to your www Home Assistant folder
It's required to load this card as module.
- url: /local/pathtofile/floor3d-card.js
type: moduleSee Home Assistant documentation for adding custom cards (https://developers.home-assistant.io/docs/frontend/custom-ui/custom-card) and registering JavaScript resources (https://developers.home-assistant.io/docs/frontend/custom-ui/registering-resources).
Model Design and Installation
Use a 3D modeling software. As you have to model your home I would suggest this software (the one I tested): http://www.sweethome3d.com/. Model your home with all needed objects and furniture (I will post here some hints on how to better design your home for best results with the custom card). For further instruction I assume you will use SweetHome3D. At the end of your modeling, you need to export the files in obj format using '3D View \ Export to OBJ format ...', specify the folder where you want to store the output (be careful there are multiple files) Copy the full set of files (minimum is the .obj file and .mtl file) to a sub folder of /config/www in Home assistant. Be aware that when you remove objects from the model the object ids get reassigned: This means that after a modification and re-export of your model it is possible you need to redo the bindings with the new object names. The new feature (https://github.com/adizanni/floor3d-card/issues/7) is now available in this repository https://github.com/adizanni/ExportToHASS. It is a new plugin for Sweethome3D. It is still very experimental, use at your own risk, and please follow the instructions. It could be also good practice to make the objects invisble instead of removing them (not yet tested if this solution preserves the objects ids).
If you want to have an object that groups together other objects (ex a mannequin is composed by 100s of objects you want to treat it as one), you can follow this trick: https://community.home-assistant.io/t/live-3d-floor-plan-with-interactive-objects/301549/78?u=adizanni.
Based on some feedback there are some open issues which I will try to fix, please follow these rules if you want things to go smooth:
- Place the upper left corner of your 2D floor model at 0,0 coordinates otherwise the camera setting will work weirdly (due to calculation on the coordinates that I need to fix)
When you are finished, configure a new card (either in panel mode or regular) with the following options:
Note: GLB format
If you want to generate a glb file instead of the wavefront (obj) file to load the card (it is faster and more optimized), you can follow this procedure in Windows: Install nodejs here https://nodejs.org/dist/v16.14.2/node-v16.14.2-x64.msi Once installed you can open a command prompt (or powershell) and type the following command:
npm install -g obj2gltfThen (always in the same command prompt) you just have the full wavefront obj model (either created with the builtin function or with my plugin) to a folder (obj, mtl, pictures), move to the folder (cd
obj2gltf --checkTransparency -i home.obj -o home.glbAssuming your model is called home.obj. You wait for some time (from few seconds to minutes) and when it is completed you can take the glb file and copy it to the www folder of Home Assistant. It is a self containing binary object so you just need that one file to load the model.
Options
| Name | Type | Default | Description |
|---|---|---|---|
| type | string | Required | custom:floor3d-card. |
| name | string | Floor 3d | the name of the card. |
| entities | array | none | list of enitities to bind to 3D model objects. |
| object_groups | array | none | list of object groups to apply grouped entity bindings. |
| style | string | none | the style that will be applied to the canvas element of the card. |
| path | string | Required | path to the Waterforont obj (objects), mtl (material) and other files. |
| objfile | string | Required | object file name (.obj) for Waterfront format or glb file name for the binary (condensed) 3d format (still experimental). |
| mtlfile | string | Required | material file name (.mtl) Waterfront format. Only relevant when objefile has obj extension (no glb) |
| backgroundColor | string | '#aaaaaa' | canvas background color: #RGB notation (ex #aaaaaa), color name (ex. 'white') or 'transparent' for a transparent background |
| header | string | 'yes' | if the header will be displayed or not |
| editModeNotifications | string | 'yes' | 'yes' to use the double click in edit mode to pop up the object ids or the camera position, 'no' to stop displaying popups |
| selectionMode | string | 'no' | 'yes' to activate the selection mode and select group of objects, the list of selected objects will appear in the console |
| globalLightPower | float | 0.5 | intensity of the light illuminating the full scene it can also the name of a numeric sensor |
| shadow | string | no | 'yes' if lights cast shadow on object. This is realistic but impacts performances. By default wall, floors and objects with "door" in the name, receives and cast shadows |
| extralightmode | string | no | 'yes' to activate the extra light mode. In this mode the max number of light who cast shadow at the same time (max texture unit image) is limited to the light that are switched with performance penalties |
| overlay | string | no | 'yes' if you want to show an overlay panel for displaying data on the objects on click |
| click | string | no | 'yes' if you want to enable the click event. This will automatically disable the double click, you can manage the click behaviour at entity level via the action parameter |
| lock_camera | string | no | 'yes' to stop the zoom and rotate camera actions on the model |
| show_axes | string | no | 'yes' to show the axes in the scene. It can help define the direction vector for the spotlight |
| sky | string | no | 'yes' to show a sky a ground and a sun to reproduce a photorealistic home representation with sun position determined by the sun.sun entity |
| north | string | see desc | north is the direction of the north on the x-z plane. ex. {x: 0, z: 1} (this is the default) for a north in the z positive direction (see axes explanation). Goes with sky yes |
| overlay_ |