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 js file from here (https://github.com/adizanni/floor3d-card/releases/download/latest/floor3d-card.js) 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: module

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 obj2gltf

Then (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 ) and type the following command:

obj2gltf --checkTransparency -i home.obj -o home.glb

Assuming 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
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_