# Build 3D roof from flat polygons

Hello again,
with your help I managed to get good looking 2D shapes of every roof from an API (as you can see in playground), so thanks again.
But now I have to make it 3D, I know polygons are made in XoZ and to make it 3d we add depth, so I thought about rotating these polygons, but I find it hard to come up with a solution that would work for every part of the roof, since the positions, angles and directions are different and also rotating would probably require adjusting position of each element so they stick together instead of being a bit separated.
Using the polygons and rotating them would be nice, because on top of those polygons there will be boxes placed by user (solar panels, chimney, other possible obstacles), so theyâ€™d be rotated and moved with that polygon when moving from 2D into 3D (hopefully).

Here is data I get from API: Pastebin, there is an inclination angle, direction and other properties, but I donâ€™t have more data than what is in that pastebin.
Itâ€™s a bit different from data in `polygon = [[[...], ...]]`, because I use â€śmercator-projectionâ€ť library to make sure it looks like on maps (so with 90 degree angles).

If there is a better way to achieve that than rotating, then Iâ€™m up for it

2d representation | Babylon.js Playground (babylonjs.com)

Thatâ€™s how it looks on a map

I donâ€™t have the image how that specific roof looks like in real life, but Iâ€™d like to achieve something like this, without the house of course, just roof, nothing more

1 Like

Hello, you could take a look at this Developing Build a House from Plans | Babylon.js Documentation (babylonjs.com) and Using Build a House from Plans | Babylon.js Documentation (babylonjs.com)

@carolhmj thank you for the links to the docs, but we already know them, and we are not sure if itâ€™s the best way if we have data in its current form - maybe we missed something.

Do you think there is an easy way to change the angle of each panel (part of the roof) by a given angle/degree in this example - https://playground.babylonjs.com/#AARUA6#4 ?

1 Like

Hi @avanrish and a welcome to the community to @Mikolaj_Lehman from me. Making the assumption that the outer edge of the roof aligns with the building below it then the outer edges will form the axes for any rotation. Unfortunately simply changing the angle with the flat panels will not produce the result you want as the panels will not meet after rotation.

Here is a simple roof plan (take out comment markers on lines 57 and 62 to see change in angle.

Another way would be to construct custom meshes for each panel and then set the height of particular vertices. The issue would be how to determine the particular vertices to increase in height from just the data you have to draw the flat plans. Not even sure it would be possible.

The Playground below is a very basic illustration of the principal.

Remove comment markers from lines 118 and 123 to see 3D roof

2 Likes

Hi @JohnK thank you for your examples. Do you think we can extrude 2D to 3D using the data we have?

Iâ€™ve just recorded a short video to describe the details:

1 Like

I can think of a possible way but it is quite complex. Here is the basic idea.

First you form a graph of all the vertex points that make up the roof.

Each node of the graph would also need to store the panel it belongs to.

A simplified graph of a roof

When you select node E for example to increase its height then Node F needs to be increase by the same amount and the appropriate vertices for panels 1, 2, 3 and 4 set the new height and panels updated.

In this PG

you can build a graph for one mesh, in your case with multiple mesh panels it would be a bit more complicated. You can ignore the shortest path parts.

1 Like