Floorplan 3D - A Home Assistant 3D Floorplan Card

Share your Projects! Dashboards & Frontend
1

Hello, I’ve recently finished a custom-card for lovelace / home-assistant that renders your 3d model of your home directly on your dashboard. All it takes is a direct export from Sweet Home 3d or other software that can export models in the .obj/.mtl file format.

floorplan_3d_logo
floorplan_3d_logo500×500 172 KB

Floorplan 3D - A Home Assistant 3D Floorplan Card

This card uses three.js to render a 3D model of your home exported from Sweet Home 3d or other software (.obj/.mtl). It is configurable to render your lights in real time by associating them with your light entities and placing the light sources in your model.
View Demo »

Learn More

6 Likes
2

Placeholder

1 Like
3

What improvements over Your Home Digital Twin: Interactive floor 3d plan does this have? Faster rendering, lower memory use, by any chance?

4

Lighter and Faster, room lighting renders correly, built from scratch with more improvement to come. Can be added to any dashboard.

If you have a light optimized model you should not have any issues.

Give it a try :smile:

5

I will give it a try. Currently using *.obj files for digital twin. How do you light optimise a model?

6

Sorry, I just mean that if you model is lightweight and doesn’t have a lot of complex furniture, etc…

I had a model with a couple of detailed vehicles in the garage among other things. The .obj file was over 150MB. Took a while to load, but it worked fine until you added a few lights.

I have about 30 lights, if they are all on. It boggs down on my phone and even a core i5 laptop. I’m working to come up with a solution to this. But, if you have a lighter model with less lights you should be fine.

The goal is to not compromise on the visual aspects of this. The shadows are the thing that seems to really slow things down. I’m working on ways to keep them, while preserving performance.

Thanks for giving it a shot though.

2 Likes
7

In my current setup with digital twin, yes I have noticed it bog down on a phone.
I am actually using the *.glb model method. (Which improves speed and loading.)

Unfortunately my house is not simple, currently running three separate digital twin cards, with back walls etc. deleted from the images to shrink the file size down.

Basement 3763.7 KiB
Middle 7760.1KiB
Upstairs 4027.1 KiB

Contained in a swipe card. Currently working OK on Tablets and Computers. Phones currently cause the HA App to shut down.

image
image1920×913 122 KB

digital twin enables an option to show a shadow for a light or not to cope with max number of lights that can be shown with a shadow.

There is 38 Total lights in my three floors, with 5 lights casting shadows. (Works Reasonably on most devices except phones.)

May be worth reaching out to @adizanni to join forces, as I don’t think he has had too much time to develop his recently.

His does have a coordinate picker built into the card, rather than opening developer tools.

8

Hello @johnnyo21 and @Chykan , I kind of abandoned any new development of the card from my side and I welcome the arrival of some new projects leveraging the same architecture. Even if the current code need some heavy refactoring, I implemented a lot of capabilities inside the card and I’m pretty sure you will find a lot of interesting pieces of code. I was also thinking about a restructuring of the config model to make it more 3d object centric instead of the current approach (that is Entity centric). The limitation of the lights is inherent to the WebGL library behind ThreeJS, I’m not sure if you were able to find a workaround.
You can also try to re-use the SweetHome3D plugin I’ve built to ensure the object name would stay consistent across several exports of the same model. Do not hesitate to ask questions if you have some trouble or get into blocking issues, it is probable I have already found a solution…

Let me know.

Andy

1 Like