Nice!!!
For the two floors I have to do some tests, but in general you need to simplify your model, I have only put essential objects that represent my home. Related to the textures, if you imported them as images from Sweet Home they should be also exported. You have to copy all files generated by the Sweet Home export function into the target home assistant folders.
Ensure your browser is GPU accelerareted; I’ve not tested wether this will accelerate the rendering, but it will not slow down it either, worth a try.
I have exported all images, it’s 179 files.
But perhaps this is just me, but the 3d reder wont load until I have the sh3d file in there also.
I will give it a try again with the two floors with sh3d file.
But I’m not sure I want to remove too much.
I see a lot of people show their homes as renders and there is a table an a sofa. That’s it…
I want the 3d to represent the house. My model has toys on the floor and everything is measured.
As an example, this vent is in scale and correctly positioned.
Ok… The remotes and toys are not positioned correctly at the moment but… you know… It’s hard to force the family to place the remotes and toys according to the model.
But we will move in about six weeks so I’ll have to redo everything anyways…
4 Likes
I must say, I’m not a 3D modeling super expert, I though that it was nice to have a 3D model animated with Home Assistant states, so, for my own, I built a “just enough” model to implement that. I will give it a try with more complex models to see how the Javascript respond and to parametrize in order to get the most out of each user expectations (based on model complexity; ha interactivity and PC power).
1 Like
This is the Javascript object that does the most of the magic and there are quite a few parameters to define the output quality and to adapt to the client capabilities (from the CPU; GPU and memory available)
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