I can upload my sh3d file if you want to use that?
No worries there are a lot of samples around in the internet; your model seems quite “private”…
I don’t mind. We’re going to move soon anyways.
I’ve tried with this sample http://www.sweethome3d.com/examples/SweetHome3DExample15-HouseWithDormers.sh3d (Wavefront obj size around 150 Mb): it takes ages to render and at the end the model is incomplete. I have an old Laptop with a poor GPU and running on Ubuntu, not the ideal conditions to run these intense 3D load in Javascript. I’m looking into some optimizations, but I keep that the card will never be a way to animate a perfect 3D model of your home, instead it will be a nicer visualization of your entity states. Hard to achieve both
Awesome project! Works great on mobile. On Desktop I can’t get the card format right, it’s the same format as mobile (500x930). Is this due to my 3D Model or am I missing an option to adapt the Lovelace card to current screen size.
1 Like
Hello Max, the card works in Panel mode and should automatically fit your browser size. As I am a Javascript beginner I struggled with styles, but now the card is showing well at the center of the available space, I invite other to look into my code to detect a wrong style mqnqgement and suggest corrections. I confirm, iOS rendering is awesome and flawless
I’m turning the card into a more standard and official project with Typescript and all the helpers, hope this will help in fixing the default behaviour…
1 Like
I’ll be waiting patiently! I fixed it for now with card-mod by modified .colum CSS and removing max-width: 500px.
I’m not sure if you read this other comment:
Sorry, didn’t see that comment. Running panel mode works fine.
It seems like that columns max-width is defined by home assistant it self to have 500px max, that’s why its so narrow when not using panel mode.
Hello everybody, I’ve converted the project into Typescript but not yet integrated into HACS (give me some time, I’m learning). I’va also added 2 new config items (name, that will appear in the header, and style, that will be applied to the card).
New link and instructions in the head post of this thread.
2 Likes
Is it possible to set the point of rotation?
My limited tests makes me think it’s rotation point is the last item you had selected in Sweet home 3d
Camera position and initial orientation is calculated based on the max coordinates of the model, after you can rotate it clicking on the left button, move it clicking on the right button and zoom it using the scrolling wheel. There are quite a significant amount of possible parameters to set and based on your feedback I will implement them as soon as possible…
1 Like
Ahh i didn’t know about the right button.
Sound good!
So the benefit of using this card over the picture element is we can interact the floor plan by rotate/zoom in/zoom out?
1 Like
Yes.
And the yaml is far easier.
With the picture card you need to guess your way to where the lights should be with left: 10%, top: 17%.
It takes forever.
2 Likes
Will give it try.
1 Like
I’m currently experiencing some issues with the new typescript module (I need to better understand the mechanics). For the “beta” testers, I invite you to still follow the old link which I will repost in the head post of the thread.
So after some thourough testing I released a the Typescript version that is now stable enough to give it a try.
Source code is here: GitHub - adizanni/floor3d-card
And the js module to import as a resource is here: https://raw.githubusercontent.com/adizanni/floor3d-card/master/dist/floor3d-card.js
The type of the card is: floor3d-card
The Readme is also updated, with the latest instructions
Would love to give it a try but I will have to wait until the floorplan of our new apartment is done.
One thing I would want is an entitylist on the side(s).
If you can add like an entity card that is overlayed on the left or right side then you could control the lights/entities on the view also.
1 Like