I need to build a roof visualization in 3D and 2D editor, so that users can put solar panels on it etc.
I have an API that gives me basically geo json with polygon coordinates for any part of the roof - data looks like this. “coordinates” array contains 2 arrays - 1st one is the part of the roof that user wanted to get, and 2nd array is a hole in it. (green is what I want, red is the hole I need to drill in my polygon Imgur)
What I tried to do is:
- Draw an SVG using D3
- Convert SVG to polygon using Path to Polygon Converter (betravis.github.io)
- Then I put values from that tool into Vector3(x, 0, z) and I received a shape I wanted
The problem started with holes, because I’m using fixed 600x600 svg to get the shape and I can’t determine proper size from Geo JSON that those shapes and holes should have, which meant I ended up with a big square hole that didn’t do anything.
You can see svg outlines in red on top of babel canvas for comparison.
I think my approach there was wrong, but I can’t really think of anything else.
The ultimate goal is to get a one shape that user clicked on the map (like solcellespesialisten.no) and render it, and after user is done adding things on it, then they would see a 3D visualization of the entire roof, so the entire building’s roof, not only the part they clicked (it is the same API). (more or less like this)
So, the most important thing for me right now is to somehow get holes in a shape, and also get all shapes of building roof and position them in correct place, like on solcellespesialisten.no (for now without rotating, just flat 2d to begin with, but 3d will also be appreciated)
Here is my code (roof-babylon (github.com))
and live demo.
To use other roof than provided by me in that demo, you go to solcellespesialisten.no, open Dev Tools and Network Tab, click on a roof on the map and you should see “punkt?Y=AA.AAAAAA&X=BB.BBBBBBB”, click on it → choose “Preview” tab, expand object, and copy Geometri value (just Geometri and paste as a string, not an object)
I’ll appreciate any help,
Thanks in advance