{"id":29107456,"url":"https://github.com/johnnyo21/floorplan_3d","last_synced_at":"2026-05-19T19:02:35.052Z","repository":{"id":299710659,"uuid":"1003949043","full_name":"johnnyo21/floorplan_3d","owner":"johnnyo21","description":"Home Assistant 3D Floorplan Card","archived":false,"fork":false,"pushed_at":"2025-06-26T16:08:01.000Z","size":1916,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-26T16:47:29.284Z","etag":null,"topics":["3d-floorplan","3d-model","digital-twin","floorplan","home-assistant","lovelace-custom-card","obj"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/johnnyo21.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-17T22:19:47.000Z","updated_at":"2025-06-26T16:07:18.000Z","dependencies_parsed_at":"2025-06-17T23:40:43.092Z","dependency_job_id":null,"html_url":"https://github.com/johnnyo21/floorplan_3d","commit_stats":null,"previous_names":["johnnyo21/floorplan_3d"],"tags_count":19,"template":false,"template_full_name":null,"purl":"pkg:github/johnnyo21/floorplan_3d","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnnyo21%2Ffloorplan_3d","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnnyo21%2Ffloorplan_3d/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnnyo21%2Ffloorplan_3d/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnnyo21%2Ffloorplan_3d/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/johnnyo21","download_url":"https://codeload.github.com/johnnyo21/floorplan_3d/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnnyo21%2Ffloorplan_3d/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267441520,"owners_count":24087772,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-27T02:00:11.917Z","response_time":82,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3d-floorplan","3d-model","digital-twin","floorplan","home-assistant","lovelace-custom-card","obj"],"created_at":"2025-06-29T05:03:33.881Z","updated_at":"2026-05-19T19:02:29.995Z","avatar_url":"https://github.com/johnnyo21.png","language":"JavaScript","funding_links":["https://www.buymeacoffee.com/johnnyo21"],"categories":[],"sub_categories":[],"readme":"\u003ca id=\"readme-top\"\u003e\u003c/a\u003e\n\n\u003c!-- PROJECT LOGO --\u003e\n\u003cbr /\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/johnnyo21/floorplan_3d\"\u003e\n    \u003cimg src=\"images/floorplan_3d_logo.png\" alt=\"Logo\" width=\"250\" height=\"250\"\u003e\n  \u003c/a\u003e\n\n\u003ch3 align=\"center\"\u003eFloorplan 3D - A Home Assistant 3D Floorplan Card\u003c/h3\u003e\n\n  \u003cp align=\"center\"\u003e\n    This card uses babylon.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.\n    \u003cbr /\u003e\n    \u003ca href=\"https://youtu.be/OksZrxFuF1w\"\u003e\u003cstrong\u003eView Demo »\u003c/strong\u003e\u003c/a\u003e\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n    \u003ca href=\"https://github.com/johnnyo21/floorplan_3d\"\u003eGet Help\u003c/a\u003e\n    \u0026middot;\n    \u003ca href=\"https://github.com/johnnyo21/floorplan_3d/issues/new?labels=bug\u0026template=bug-report---.md\"\u003eReport Bug\u003c/a\u003e\n    \u0026middot;\n    \u003ca href=\"https://github.com/johnnyo21/floorplan_3d/issues/new?labels=enhancement\u0026template=feature-request---.md\"\u003eRequest Feature\u003c/a\u003e\n  \u003c/p\u003e\n  \u003cbr /\u003e\n  \u003ca href=\"https://www.buymeacoffee.com/johnnyo21\" target=\"_blank\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/default-orange.png\" alt=\"Buy Me A Coffee\" height=\"41\" width=\"174\"\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n\n\n\u003c!-- ABOUT THE PROJECT --\u003e\n## About The Project\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/johnnyo21/floorplan_3d\"\u003e\n    \u003cimg src=\"images/floorplan_3d_example.png\" alt=\"Example\" \u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\n### Built With\n\n* Babylon.js - \u003ca href=\"https://babylonjs.com\"\u003ebabylonjs.com\u003c/a\u003e - Open Source 3d javascrypt library\n* Home Assistant - \u003ca href=\"https://homeassistant.io\"\u003ehomeassistant.io\u003c/a\u003e - Open Source Home Automation Software\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n\u003c!-- GETTING STARTED --\u003e\n## Getting Started\n\n\u003ch3\u003eFirst things first, you will need a 3d model of your home. \u003c/h3\u003e\n\u003cp\u003eAn eazy way to get started is with \u003ca href=\"https://www.sweethome3d.com/\"\u003eSweet Home 3D (FREE SOFTWARE)\u003c/a\u003e - Google some tutorials or videos to help you get started.\n\u003cbr /\u003e\nAlternatively, you can use any other 3d design software as long as you can export your models in (.OBJ / .MTL) format.\u003c/p\u003e\n\n### Prerequisites\n\nOnce you have the model of your home completed using Sweet Home 3D.\n* (OPTIONAL) Navigate to 3D view --\u003e Modify 3D view --\u003e Walls transparency --\u003e Drag the Slider slightly to the right to add a little transparency to your models walls.\n* Navigate to 3D view --\u003e Export to OBJ format --\u003e Save the files (OBJ - Wavefront) to a folder on your computer. (Save as floorplan.obj or something similar)\n* Confirm you now see in this folder floorplan.obj, floorplan.mtl and any texture image files associated with your model.\n* Access the www folder inside of home assistant. Create a new folder inside of this directory and copy all of these files over `/www/floorplan/YOUR_EXPORTED_FILES`\n\n\n\n### Installation\n\nUsing HACS (RECOMMENDED)\n\n1. If HACS is not installed yet, download it following the instructions @ \u003ca href=\"https://hacs.xyz/docs/setup/download/\"\u003ehacs.xyz\u003c/a\u003e\n2. Navigate to HACS in the sidebar of your home assistant dashboard and click on the 3 dots in the upper right corner of the screen. Navigate to \"Custom repositories\".  A dialog should appear with 2 input fields. Under Repository enter the github url below and under the Type dropdown select \"Dashboard\".\n   ```sh\n   https://github.com/johnnyo21/floorplan_3d/\n   ```\n3. Search for \"Floorplan 3D\" in HACS, Open the Description and Click on the Download button appearing in the bottom right corner of the screen. Click Reload when prompted.\n\n   \u003cbr /\u003e\nManual Installation\n\n1. Download the most recent version of `floorplan-3d-card.js` from Github and copy it to `/www/floorplan/` on your home assistant installation. \n  \n2. Navigate to Settings --\u003e Dashboards in Home Assistant.  Click the 3 dots in the upper right corner and navigate to \"Resources\".\n\n3. Click \"Add Resource\" and enter the url: `/floorplan/floorplan-3d-card.js` and ensure JavaScript module is selected.\n   \n4. Restart Home Assistant.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n\n\u003c!-- USAGE EXAMPLES --\u003e\n## Usage\n\n1. Navigate to the Dashboard that you want to add your floorplan to.\n2. Edit the dashboard and add a new card.  When prompted search for or scroll down to \"3D Floorplan Card\" and add it to your dashboard.\n3. In the card configuration you will need to direct the card to your .obj model (see prerequisites above).  Be sure your filenames match what you have saved in the `/www/floorplan/` directory. \n   ```sh\n   type: custom:floorplan-3d-card\n   obj_path: /local/floorplan/floorplan.obj\n   mtl_path: /local/floorplan/floorplan.mtl\n   ```\n4. Save the card and ensure that your model is loading properly on your dashboard.\n5. Now to add our light entities to our model. Edit the card and add the following under our file paths in the yaml configuration. Save the Card\n   ```sh\n   debug_mode: true\n   ```\n6. Open your browsers Developers Console (F12 on your Keyboard or Right Click and Select Inspect Element) .. Click on Console and Refresh the Page.\n7. Ensure you are looking at your model from the top down and click on the floor where you would like to add a light source in a room.\n8. You should see in the debug console a message that reads: `[FLOORPLAN DEBUG] Click coordinates: position: { x: 505.110, y: 0.000, z: 572.587 }` Write that down with the associated light name. You can keep clicking on other lights and record them or proceed to adding your light via yaml below. \n9. Edit the card again: Add the following under `debug_mode:` Change the X and Z coordinate to match the values you have written down and adjust the Y coordinate to the height of the light in the space.  Start with 230 for 8-9 foot walls and adjust from there if needed. You should see a Red Dot Appear on your model indicating the location of your new light source.  Save the Card. \n   ```sh\n   light_map:\n    - entity_id: light.YOUR_LIGHT_ENTITY\n      position: { x: 505, y: 230, z: 572 }\n   ```\n10. The light in your model should now be followng the associated light entity.  It will turn on/off and if dimmable or RGB will follow the brightness and color of the light as well. Edit the configuration to `debug_mode: false` once you have added all of your light sources.  (Note: if you have several lights or a complex model, try adding the lights via the \"Raw Configuration Editor\" to save loading time between edits)\n11. Additional Configuration:\n   * ambient_light_intensity: X.X - OPTIONAL - changes the ambient light shining on the model - (eg. 0.1 is very dark, 0.9 is very bright)\n   * shadows: true - OPTIONAL - globally switch on or off rendering shadows to optimize performance (default value is false)\n   * light_map:\n      intensity: X.X - OPTIONAL - changes a light entities brightness offset. (eg. 1.4 would make the light 40% brighter than its current brightness, 50% x 1.4 = 70%)\n      color: \"0xffefcd\" - OPTIONAL - changes the color of the light if the light source is not RGB.\n      cast_shadows: false - OPTIONAL - change weather a single light will cast shadows or not.\n\n13. Example Configuration:\n   ```sh\n   type: custom:floorplan-3d-card\n   obj_path: /local/floorplan/floorplan.obj\n   mtl_path: /local/floorplan/floorplan.mtl\n   debug_mode: false\n   ambient_light_intensity: 0.4\n   light_map:\n    - entity_id: light.YOUR_LIGHT_ENTITY_1\n      color: \"0xffefcd\"\n      intensity: 1.4\n      position: { x: 505, y: 230, z: 572 }\n    - entity_id: light.YOUR_LIGHT_ENTITY_2\n      color: \"0xffefcd\"\n      position: { x: 105, y: 230, z: 950 }\n      cast_shadows: true\n   ```\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n\n\u003c!-- ROADMAP --\u003e\n## Roadmap\n\n- [X] Associate Light Sources with Light Entities and Track State, Brightness, Color.\n- [ ] Associate Door and Window Positions with Door and Window Switch Entities and Track State.\n- [ ] Associate Ceiling Fan and Exhaust Fans with Fan Entities and Animate based on State.\n- [ ] Associate Misc. Entities (ie. temperature, alarm, motion, etc.)\n- [ ] Optimize Performance with Large Models\n    - [ ] Compress and Optimize for Web the Model itself. \n\nSee the [open issues](https://github.com/github_username/repo_name/issues) for a full list of proposed features (and known issues).\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n\u003c!-- LICENSE --\u003e\n## License\n\nDistributed under the MIT License. See `LICENSE.txt` for more information.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohnnyo21%2Ffloorplan_3d","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjohnnyo21%2Ffloorplan_3d","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohnnyo21%2Ffloorplan_3d/lists"}