How to extrude polygon from X-Y until intersection with inclined plane

[Peque]

I have just started to play with Three.js and JS and I really love this tool. It is amazing how much you can do by just tinkering with the examples from the web. ^^

Now I want to do something which I have not found in the examples.

This is a broad question and I am looking just for pointers/links/suggestions on which functions/types to use or documentation to read. Sorry if it is too vague (if that is the case, I will try to work on it and provide some code/visualizations on what I would like to achieve).

Currently, I have a non-convex polygon with N vertices drawn in the X-Y plane. I can easily extrude it with THREE.ExtrudeBufferGeometry. The “poblem” is that this function only allows me to extrude the polygon a certain height (i.e.: depth: 10) for all vertices. But I am looking for something different.

I would like to extrude the polygon up (in the positive Z-direction), but limit the extrusion with an inclined plane (not necessarily parallel to the X-Y plane). Assumptions:

• The plane is above (Z-direction) all vertices in the polygon that is to be extruded; that means the shape of the polygon in the base is conserved after extrusion (and matches the shape of the top when looked from the Z-direction with an orthographic projection)
• The plane is not parallel to Z-direction, so the polygon, when extruded, always ends up crossing the plane for all its vertices (volume of the final 3D object is finite)

So, basically, the final geometry is a 3D geometry with 2 x N vertices, half of them sitting in the X-Y plane (Z = 0) and the other half above them (sharing the same X-Y coordinates). The total number of faces is 2 (one top, one bottom) plus N (one 4-sided polygon joining each pair of segments between the top and bottom faces through 2 vertical segments).

I would like to be able to select/access and interact with all those vertices and all those faces (i.e.: through an attribute or method). No need pointers/links for that, just to make clear I would like the final 3D object to maintain that information.

Questions:

• What would you recommend me to use?
• Should I just extrude with THREE.ExtrudeBufferGeometry and then cut? (GitHub - tdhooper/threejs-slice-geometry: Slice three.js geometry with a plane.), although I would prefer not to add a dependency
• Should I create a shape/polygon in the inclined plane first and then extrude downwards to the X-Y plane? (don’t know if that would make things easier)
• Should I try to define the faces manually? Vertical faces would be easy, because they are convex 4-sided polygons, but top/bottom are not convex, so maybe I would need something like GitHub - mapbox/earcut: The fastest and smallest JavaScript polygon triangulation library for your WebGL apps ?
• Is there a better method/type?

[hofk]

The considerations are already very detailed.

To recommend the best way at the first go is certainly difficult.

Have you seen the example of the cut in the
Collection of examples from discourse.threejs.org ?
https://hofk.de/main/discourse.threejs/2018/index2018.html
PointsGroupingCutPlane - @prisoner849 author (with more links in the source code)

https://github.com/mapbox/earcut produces triangles of very different sizes. The algorithm I use results in smaller triangles, but may not be important for flat structures.
Addon for triangulation of implicit surfaces/ forms with holes

Some flat surfaces (test, still unfinished, use the slider) https://hofk.de/main/threejs/1TEST/InnerGeometryTriangulation221219.html

[prisoner849]

As an option, I’d use THREE.Ray(), casted from each point of a contour on XY-plane in the desired direction (seems it’s THREE.Vector3(0, 0, 1)), using its .intersectPlane() method to find the points of the cut. Then build the index for geometry, forming faces. It’s for back sides.

For caps (base and cut) I’d use THREE.ShapeBufferGeometry(), passing shapes, built from points of contours.

[Peque]

@hofk Thanks a lot for sharing that collection! I can learn a lot from many of those examples.

[Peque]

@prisoner849 Thanks for your suggestion! Looks like a very simple solution (I knew there would be one).

Out of curiosity, can I join the geometries later? (so that they all form a solid in which each vertex is only represented once)

[Peque]

@prisoner849

For caps (base and cut) I’d use THREE.ShapeBufferGeometry() , passing shapes, built from points of contours.

You mentioned “passing shapes”, but THREE.Shape is constructed with a list of 2D points, right? For the “cut” (top plane), I have an inclined plane. How could I initialize a flat shape on that plane without using 3D coordinates? Or how could I construct it with the 3D coordinates that I have (the rays’ intersections with the plane).

Edit

Nevermind, it seems I have some study material:

2D object in 3D space (by Vertices)

Kind of a related topic: I was sure that it won’t last so simple, and there was evolving:

[hofk]

There is also a (modified) example in the collection. https://hofk.de/main/discourse.threejs/2018/SurfaceGometry/SurfaceGometry.html

When I just looked at it, the texture was missing. With the basic examples I actually always copy the textures to avoid missing links. I probably had overlooked that in this example.

UV_Grid_Sm.jpg

In the extended examples, they are only links.

I have copied the texture now and also renewed the zip file for 2018.

The problem is that the textures in the example folder have been changed. So you always have to use the appropriate revision as a basis.

There is a very extensive discussion about such problems: I wonder how many trees get burnt down and kids get neglected from three.js churn