Creating polygons with Geo JSON

Questions
1

Hello,

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

2

The CSG class subtract function may do what you need.

This playground is an example.

3

CSG looks interesting, but as I understand it, it needs already built meshes to subtract one from another and I still can’t really figure out how to make a square/rectangle-ish shape to subtract while maintaining scale and all of that, but thanks.

4

These may be a starting point for you

They only build polygons (with holes) in the xz plane

5

I use this CreatePolygon, but the main problem I have is with size/scaling of the elements, when I use array containing coordinates of my hole the same way I get my large shape (like in live demo), the square is huge and I see its border going through and out of my shape. So I thought someone could have a better idea here to use GeoJSON (e.g. one provided by me) to create it with holes and any advice how to maintain scale between those elements.

1 Like
6

The main problem is that the difference between values in the arrays are of the order 0.001 so any polygon you draw with Babylon.js is too small to be noticed. I have dealt with it fairly crudely by trimming of significant figures and enlarging the fraction left. You can see that you do get a polygon this way.

Hopefully you can work on this further. You will need to use the trimmed off part to position your polygons in the correct place.

4 Likes
7

That looks good, like the shape I want. Now I need to get 90 degree angles in that shape, but that’s for me to figure out, thank you!