Your Home Digital Twin: Interactive floor 3d plan

Share your Projects! Custom Integrations
585

@adizanni get an error i.setConfig is not a function when trying to display the card on google nest displays.

I am sure it was working prior to recent updates.

586

I was picturing something like this three.js examples @adizanni

587

Me and my robot buddy ChatGPt came up with an iLogic rule to export object names from an Autodesk Inventor model. Just tought i’d share, I put it up on Github here : GitHub - mgrenier25/3d-floor-card Just run the rule from an assembly file

3 Likes
588

Hello, I want to add sensors (temp, humi) labels on my 3D model and it seems a little bit tricky. The labels doesn’t appear. could you help on the syntax to use, please?

589

Thank you so much @adizanni !
Your work is AWESOME ! and Sweethome plugin is very useful also :+1:

This HA card is the only one which can theoretically replace all the others. Especially for those who have thousands of real time sensors. One big card to rule them all !

I noticed an issue, maybe I missed something : when you link an HA sensor to a text object in the model (working so great !!), neither in Sweet Home 3D nor in the card config you can choose transparent background for text item. In this picture, this is a #333 background I cannot remove. This means it won’t be aesthetic to apply a text with a solid background on an object with varying colors. Is there a way to hack this behaviour ?
You can see text render is ALWAYS very pixelated also :frowning:

Another issue (not in the card) in Sweet Home 3D is : text font size could not be smaller than 5. Five is very big if you want to customise very small texts in floor3dplan card. Currently, I multiply the final sweethome model dimensions by 100 and export via your plugin, in order to be able to apply 3 to 10 millimeters non-pixelated texts in the 3D view of floor 3D plan.

image
image1013×502 65.3 KB

1 Like
590

Hi @Sergedao06

Use these lines as example for link a light and customise text in floor 3D plan HA card :

entities:

  - entity: switch.light_bar
    type3d: light
    action: default
    object_id: Bar_light_20
    light:
      lumens: "3000"
      color: green
      shadow: "yes"

  - entity: sensor.rainmeter_gpu_temperature
    type3d: text
    text: {}
    object_id: Computer_display_04
591

The trick for me was realizing that you cannot apply text to just any flat object. The object has to specifically be a “frame” in SH3D, not a mirror, monitor, door, etc. In SH3D, I position the frame in front of where I want it to be, temporarily give the frame a bright color, and then move the frame back and forth with the arrows until it just disappears behind where it should go, then give one arrow click back to bring it out in front and make it visible again, then change the color of the frame again to match its surroundings.

2 Likes
592

Can you make the frame transparent using this method? I have been using the *.glb file method and have not been able to get text to show properly yet.

593

I never tried making the frame transparent. It’s a good idea, but I don’t know if it will work. My models are also .glb, so that should not be a problem.

1 Like
594

Hi everyone:

I’m trying to get my 3d floor plan work with the card and experienced some issues.
I can see the loading progress to 100% and then it says “Finished with errors: check the console log”. I tried both obj and glt format. Initially I thought it was because my model is too big (350mb), so I imported to blender and reduces the size to 100mb, but still I received the same error and never able to view the 3d model.
Log from the console in browser:

Object loaded start
floor3d-card.js?hacstag=361776538153:2288 Ïnit Objects, Levels and Raycasting
floor3d-card.js?hacstag=361776538153:2288 Found level 0
floor3d-card.js?hacstag=361776538153:2288 End Init Objects. Number of levels found: 1
floor3d-card.js?hacstag=361776538153:2288 Shadow Off
floor3d-card.js?hacstag=361776538153:2356 Add Objects Start
floor3d-card.js?hacstag=361776538153:2356 TypeError: Cannot read properties of undefined (reading 'geometry')
    at floor3d-card.js?hacstag=361776538153:2356:6171
    at Array.forEach (<anonymous>)
    at bf._add3dObjects (floor3d-card.js?hacstag=361776538153:2356:4982)
    at bf._onLoaded3DModel (floor3d-card.js?hacstag=361776538153:2288:35635)
    at bf._onLoadedGLTF3DModel (floor3d-card.js?hacstag=361776538153:2288:34978)
    at floor3d-card.js?hacstag=361776538153:2231:540195
    at floor3d-card.js?hacstag=361776538153:2231:559625
floor3d-card.js?hacstag=361776538153:2356 Error: Object issue for Entity: <binary_sensor.group_windows_doors> TypeError: Cannot read properties of undefined (reading 'geometry')
    at floor3d-card.js?hacstag=361776538153:2356:11044
    at Array.forEach (<anonymous>)
    at bf._add3dObjects (floor3d-card.js?hacstag=361776538153:2356:4982)
    at bf._onLoaded3DModel (floor3d-card.js?hacstag=361776538153:2288:35635)
    at bf._onLoadedGLTF3DModel (floor3d-card.js?hacstag=361776538153:2288:34978)
    at floor3d-card.js?hacstag=361776538153:2231:540195
    at floor3d-card.js?hacstag=361776538153:2231:559625
floor3d-card.js?hacstag=361776538153:2356 Uncaught (in promise) Error: Error adding 3D Object: Error: Object issue for Entity: <binary_sensor.group_windows_doors> TypeError: Cannot read properties of undefined (reading 'geometry')
    at bf._add3dObjects (floor3d-card.js?hacstag=361776538153:2356:11768)
    at bf._onLoaded3DModel (floor3d-card.js?hacstag=361776538153:2288:35635)
    at bf._onLoadedGLTF3DModel (floor3d-card.js?hacstag=361776538153:2288:34978)
    at floor3d-card.js?hacstag=361776538153:2231:540195
    at floor3d-card.js?hacstag=361776538153:2231:559625```
Logger: frontend.js.modern.202507023
Source: components/system_log/__init__.py:331
First occurred: 5 August 2025 at 22:18:01 (114 occurrences)
Last logged: 11:39:16

So from the log it complains the group binary sensor “binary_sensor.group_windows_doors”. Not sure why as I haven’t bound any object to the sensor. The attribute of the sensor only contains a list of entity ids of other sensors.

Log in HA:

  • Uncaught error from Safari 18.5 on macOS 10.15.7 Error /hacsfiles/floor3d-card/floor3d-card.js:2288:34547 s (/hacsfiles/floor3d-card/floor3d-card.js:2231:539919) /hacsfiles/floor3d-card/floor3d-card.js:2231:436063
  • Uncaught error from Safari 18.5 on macOS 10.15.7 Error /hacsfiles/floor3d-card/floor3d-card.js:2288:34547 s (/hacsfiles/floor3d-card/floor3d-card.js:2231:539919) /hacsfiles/floor3d-card/floor3d-card.js:2231:540236 /hacsfiles/floor3d-card/floor3d-card.js:2231:435968
  • Uncaught error from Safari 18.5 on macOS 10.15.7 Error /hacsfiles/floor3d-card/floor3d-card.js:2288:34342 /hacsfiles/floor3d-card/floor3d-card.js:2231:531796 /hacsfiles/floor3d-card/floor3d-card.js:2231:435968
  • Uncaught error from Safari 18.5 on macOS 10.15.7 Error /hacsfiles/floor3d-card/floor3d-card.js:2288:34188 /hacsfiles/floor3d-card/floor3d-card.js:2231:436063
  • Uncaught error from Safari 18.5 on macOS 10.15.7 Error /hacsfiles/floor3d-card/floor3d-card.js:2356:4532 /hacsfiles/floor3d-card/floor3d-card.js:2231:531796 /hacsfiles/floor3d-card/floor3d-card.js:2231:435968

Any suggestion is appreciated!

595

I’d recommend deleting all object_groups and entities, verify that your model is displaying correctly, and then add back the object_groups and entities one-by-one to determine which ones are problematic. If there’s even one object group where the object does not exist or one problematic entity, then you’ll get errors. If you’re using the sample card code with your model, then you’ll absolutely need to do this, as there are object groups and entities corresponding to that model that simply do not exist for yours.

596

https://www.npmjs.com/package/gltfpack
Use this tool

597

Hello, nice work. I am using Panel (single card) for floor3d-card and i want to add other cards (hikvision doorbell card, robot vacuum card etc.) like your room card. Can you share type3d: gesture****your code? (it must load at starting not clicking on object)
Also how can i put the card top-left, top-middle or padding etc.
Thx.
P.S. i am real newbee.

1 Like
598

Dear @adizanni Thank you for this great work.
Can you add day/night illumination settings?
Can you add gesture to load custom cards with position and transparent settings? (top-left, padding etc.) (on page load or clicking on object)
Can you add button floor levels for glb file? It is only working with obj. Or group objects show/hide function with button exp. 1.Floor group= object1.1, object1.2, object1.3 etc.
Thank you again for your great effort for making this usefull card

599

There is sun setting.

There is floor buttons for glb. You have to export it the right way.

1 Like
600

Thank you for your help.
1-) I could not use obj2gltf with command prompt. i used online converter.

image
image997×263 16.9 KB

2-) I mean day/night not sun. Exp: when it is day Global Scene Light-0.7 and when it is night Global Scene Light xx% lower than day or a second Global Scene Light setting for night.

601

Thanks for the kind words. Thanks also for the link to the gltfpack tool. I will check it out!

Here is the gesture code:

        - type3d: gesture
          object_id: room_7_1
          gesture:
            domain: script
            service: 3d_master_bedroom_v2

It’s very simple. Just click on an empty space in the room floor.

I also rely on Browser Mod in the script, where you can control the placement of the popup card, especially with the latest updates:
[GitHub - thomasloven/hass-browser_mod: 🔹 A Home Assistant integration to turn your browser into a controllable entity and media player]

And see the community discussion:
https://community.home-assistant.io/t/browser-mod-turn-your-browser-into-a-controllable-device-and-a-media-player/123806

602

Yes the sun rises and sets. Gives you day night for your time zone.
Sorry sky setting, use with north to orientate the model the right way.

sky is fully rendered and casts shadows, you will need invisible ceilings to prevent the sun illuminating indoors.

image
image947×209 7.63 KB

globalLightPower so the model does not go completely dark.
image

use this to export The new feature (#7) is now available in this repository GitHub - adizanni/ExportToHASS: Sweethome3D Plugin for Home Assistant Export. 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).

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.

1 Like
603

I added (without code knowledge) special feature day/night different values because sky function is not stable for visual house design effects -at day too much light and at night too much dark- (i am an architect so sometimes real effects are not useful for visual design) @Chykan
Code;

**###############################################################################**
**# FLOOR3D CARD DAY/NIGHT LIGHT AUTOMATION**
**# **
**# This configuration provides automatic light adjustment for Floor3D Card**
**# based on day/night cycles using sun position**
**# Day: Darker lighting (0.3) - Night: Brighter lighting (1.0)**
**#**
**# Powered by DeepSeek AI Assistant**
**###############################################################################**

**# HELPER: Creates a numeric input for light power control**
**input_number:**
**  floor3d_light_power:**
**    name: "Floor3D Light Power"**
**    initial: 0.5**
**    min: 0.1**
**    max: 2.0**
**    step: 0.1**

**# AUTOMATIONS: Handle day/night transitions and startup**
**automation:**
**  **
**  # Trigger when sun rises (night → day)**
**  - alias: "Floor3D Light Day"**
**    trigger:**
**      - platform: state**
**        entity_id: sun.sun**
**        from: "below_horizon"**
**        to: "above_horizon"**
**    action:**
**      - service: input_number.set_value**
**        target:**
**          entity_id: input_number.floor3d_light_power**
**        data:**
**          value: 0.3  # ⚙️ CONFIG: Daytime light intensity (0.1=dark, 2.0=bright)**

**  # Trigger when sun sets (day → night)  **
**  - alias: "Floor3D Light Night"  **
**    trigger:**
**      - platform: state**
**        entity_id: sun.sun**
**        from: "above_horizon"**
**        to: "below_horizon"**
**    action:**
**      - service: input_number.set_value**
**        target:**
**          entity_id: input_number.floor3d_light_power**
**        data:**
**          value: 1.0  # ⚙️ CONFIG: Nighttime light intensity (0.1=dark, 2.0=bright)**

**  # Trigger on Home Assistant startup to set correct initial value**
**  - alias: "Floor3D Startup"**
**    trigger:**
**      - platform: homeassistant**
**        event: start**
**    action:**
**      - service: input_number.set_value**
**        target:**
**          entity_id: input_number.floor3d_light_power**
**        data:**
**          value: "{{ 0.3 if states('sun.sun') == 'above_horizon' else 1.0 }}"  # ⚙️ CONFIG: Must match day/night values above**

**###############################################################################**
**# SETUP INSTRUCTIONS:**
**# 1. Add this code to your configuration.yaml file**
**# 2. Restart Home Assistant**
**# 3. In your Floor3D Card configuration, add:**
**#**
**# type: 'custom:floor3d-card'**
**# globalLightPower: input_number.floor3d_light_power**
**# **
**# LIGHT INTENSITY VALUES:**
**# - 0.1 = Very dark**
**# - 0.5 = Medium**
**# - 1.0 = Bright**
**# - 2.0 = Very bright**
**#**
**# CUSTOMIZATION:**
**# Adjust the values marked with ⚙️ CONFIG to your preference**
**# Some users may prefer brighter days (0.7) and darker nights (0.3)**
**#**
**# Created with assistance from DeepSeek AI**
**###############################################################################**

and also for glb commands who needs; -compress @FortranFour

#install
npm install -g obj2gltf
#save as
obj2gltf -i home.obj -o home.glb --checkTransparency
#install compresssion
npm install -g gltf-pipeline
#compress
gltf-pipeline -i home.glb -o home_compressed.glb --dracoCompression
2 Likes
604

Good morning, I tried all the entities, I immediately added them before doing the configuration, but it doesn’t let me insert the entities or at most one entity and then the error comes back. I tried uninstalling but nothing always gives me the same error. Only once I managed to insert about ten entities and they all worked, but as soon as I added another entity, the error comes back and now it doesn’t let me insert anything anymore, it always gives me an error even when clearing the Chrome cache. I don’t know what to do anymore. Can you help me?