Create roof-like structures with Three.js

3
votes

I'm currently trying to get my head around a method to create roof-like structures on top of my extruded shapes in Three.js. Without delving into straight skeletons, the simplest approach I can think of is to extrude and scale the top face of my extruded mesh to look roof-like, or create a new mesh on top that is shaped to look like a roof.

This is the most basic style that I'm after, if applied to an extruded rectangle (a cube): enter image description here

The shaded area of the roof is higher than the non-shaded area.

And the same style, if applied to a more complex extruded shape: enter image description here

What I can't work out is how to create a roof structure like that, especially for complex shapes like the second example. I have the vertices for the building 'footprint' but I don't know how to extrude them while scaling the top face to give the slanted sides.

I could definitely work out the scaled vertex positions but them I'd have another problem in not know how to connect the top (scaled) face to the bottom face (ie. how to make the side faces).

Any ideas?

2
three.js
Shouldn't ExtrudeGeometry be closing the top already? mrdoob.github.com/three.js/examples/webgl_geometry_shapes.html – mrdoob
ExtrudeGeometry closes the top, but it's a flat top. What I want is a Pizza Hut-style roof in which there is another face above the top extruded one, that is slightly smaller so the side faces are slanted up towards it… like a roof. – Robin Hawkes
Hey Robin, did you ever complete a one-sided bevel? Looks like I'm running into this same issue, 2 years later. – Flux

2 Answers

2
votes

Sounds like you want to experiment with the bevel parameters in ExtrudeGeometry. https://github.com/mrdoob/three.js/blob/master/src/extras/geometries/ExtrudeGeometry.js

0
votes

As the top roof polygon will have the same number of verts as the bottom roof polygon isn't this just a case of looping through each top roof polygon vert and connecting it to it's bottom roof polygon vert?

And, any two verts on the top roof polygon along with their associated verts on the bottom roof polygon will give you all the verts for a side face.