Your Home Digital Twin: Interactive floor 3d plan

adizanni · April 21, 2021, 9:16am

After some more extensive tests I can confirm that the brand new floor3d card is now built according to a more standard Typescript template, I’ve also optimized the code and eliminated some useless operations, this has a noticeable effect on the CPU and GPU consumption. For those who started to test in the previous version, the configutation of the card is still valid, you just need to update the type of the card from visualization-card-3dfloor to floor3d-card. Important to note that the card is still in a very early stage, so I apologize in advance if you are going to experience trivial issues…

Full manual in the README

This project is only possible thanks to the JS library Three.js

adizanni · April 23, 2021, 10:55am

Hello all, I really invite you to test it and give feedback, also hints, issues and feature requests are welcome. I’m not a Javascript expert I may have coded poorly or without performance optimizations

Flipso · April 23, 2021, 11:45am

is it possible to add the rendered picture from sweet home instead of the bare floorplan?

adizanni · April 23, 2021, 12:24pm

Hello Flipso, I’m not sure I get your question, this card is not about importing images, instead, you integrate the model exported from Sweet Home into home assistant using the library Three.js which can be used interactively. Lights and objects animates inside the model based on the state of the entities.
Look at this video to see the final result: Home Assistant Custom Card 3D Floor Plan - YouTube

Flipso · April 23, 2021, 1:46pm

well thats nice, but the quality of the model isnt as nice as the rendered picture, so if it would be possible to have the full rendered pic with this lightsources illumination would be awesome

Hellis81 · April 23, 2021, 2:52pm

I’ll give it a try when I have time.
But what happens if your floorplan is about 200 MB?

adizanni · April 23, 2021, 3:47pm

You need to know that the workload is in the browser JS library. So the bigger the model, the slower will be the rendering and the higher will be the browser CPU/GPU consumption. Also the model is stored into the config/www folder of HA, if you have trouble with storage space it may be a problem. Otherwise it is pretty stable and smooth (my model weights 50Mb). If you have trouble, try to remove from the model complex objects. Another important point is: Sweet Home tends to mess up the Object_ids when you remove/replace objects from the model. Do the Home Assistant binding only to a model that you consider stable…

adizanni · April 23, 2021, 3:51pm

I’ve not yet played with all the three.js settings and parameter but the rendering is not that far from the one you get in the Sweet Home 3D View. I will see what I can do quality-wise, or if there is an expert in 3D rendering in the forum, I hope he will help up improve

adizanni · April 24, 2021, 6:52am

I just added the management of light power and the rendering of colors and brightness

Hellis81 · April 24, 2021, 7:19pm

It’s quite slow progress copying the files.

adizanni · April 24, 2021, 8:35pm

It is a big library, but it does a lot more thing than what is required for the HA card. I may come up indicating the minimal set of required js file to make it work…

Hellis81 · April 24, 2021, 9:08pm

I get “Custom element doesn’t exist: visualization-card-3dfloor.”

I was a bit confused in the installation process.
You should have a three.js folder appearing under modules

You mean three.js-master?

Also the instructions does not say anything about adding the js as a resource, but I assume:

Right?

But I still get that error

adizanni · April 24, 2021, 9:55pm

Apologies, my instructions were not tested with the master.zip I was doing wrong assumptions. Waiting for a better instruction guide, please follow these instructions:

keep only the “build” and “examples” folders under “three.js-master” (remove everything else)
rename the “three.js-master” to “three”

At the end you should have a directory structure looking like this:

www
|–modules
----| three
-------- |–build
------------- |-- …
-------- |–examples
------------- |-- …

Also, you are right, you need to register visualization-card-3dfloor.js in Lovelace Resources.

Thanks for your tests, this helps me a lot in refining the setup and config instructions.

Also please consider this is an alfa version, I hope it will be worth the effort…

Hellis81 · April 24, 2021, 10:00pm

OK… I’ll give that a try.

What about this?

adizanni · April 24, 2021, 10:07pm

Remove everything except build and examples

Hellis81 · April 24, 2021, 10:07pm

Now I manage to get the card working but it does not load up the file.

It just stays black. Or do I have to add entities even to get it to load, my intention for tonight is just to see if it works.

EDIT; I tried your example file on GitHub and it worked.
Perhaps it’s because my floorplan is two floors?

adizanni · April 24, 2021, 10:12pm

Remove the “entities” and wait a little, if I remind, you told your model is big, it may take a while to load. The biggest I’ve tried is 50 Mb and it takes a few seconds

Hellis81 · April 24, 2021, 10:14pm

I waited minutes. But could it be because it’s two floors?

I’m going to bed now, so don’t wait from my response.

adizanni · April 24, 2021, 10:17pm

Try to open your .obj with 3dpaint or 3dviewer in windows, iIf it is working there it should work also in three.js. Tomorrow if you have more time you may try to do some tests (ex. splitting the floors in sweet home 3D, etc)

Hellis81 · April 25, 2021, 5:31am

I got one floor working but some textures are not loaded.

At least I know it works.
I’ll probably add a few lights just to see if I get it to work properly then I will wait until I get the new floor plan in the new apartment.

And paint3d has been working on opening the file for about 30 minutes now…

EDIT:

it just took a very long time…