CODEWITHSUNDEEP
three.js
Robin Hawkes
Robin Hawkes

Reputation: 708

Create roof-like structures with Three.js

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?

Upvotes: 3

Views: 2390

Answers (2)

mrdoob
mrdoob

Reputation: 19592

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

Upvotes: 2

Dudley Adshead
Dudley Adshead

Reputation: 1

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.

Upvotes: 0

Related Questions