Mesh intersections with box and mesh unfolding

Questions
1

I am building a web app where you can configure a specific paper fold into a bounding box. The paper fold can be downloaded as a flattened SVG, which you can then print and fold yourself.

The current state is https://develop--quiet-chaja-24a478.netlify.app
I’m currently running into some issues and would like your opinion.

In order to fill the bounding box I have to cut off part of the mesh and stitch it to the other end. If I also want to support rotation I will have to cut and stitch at least four times.

cutandstitch

My first attempt was to find the intersection between each face and one plane of the bounding box. Press the ‘Cut’ checkbox. This somewhat works but with errors. Intersection the flattened view is not implemented yet (which would be more complex).

Having worked with WebGL directly I thought it might be easier to use boolean operations or ‘constructive solid geometry’ for cutting and stitching. One future feature for this app is to cut holes in the paper fold as well, so CSG sounds logical.
It looks as though GitHub - gkjohnson/three-bvh-csg: A flexible, memory compact, fast and dynamic CSG implementation on top of three-mesh-bvh is the best option for ThreeJS.

Here is a test https://feature-csg--quiet-chaja-24a478.netlify.app

This has issues as well, but they might stem from me not knowing how to interpret the warning must be two-manifold - or water tight with no triangle interpenetration. The above example only works to extent because I turned off the backside. I initially made the backside visible by adding inverted faces. So faces not only share vertices with their neighbours but also with their opposites.

The other issue is that the end-goal is a flat surface. For the first example the 3D and 2D views are calculated separately. If I go the way of CSG I must find a way to calculate the 2D view from the resulting 3D mesh.
I did find some papers describing how to to it, but they go a bit over my head. And they solve problems that don’t apply to the meshes I use.
One paper called ‘Optimized Topological Surgery for Unfolding 3D Meshes’ does have C++ source code for download which I might be able to port.

Although CSG and subsequent mesh unfolding might work, it feels like overkill and a lot of uncertainties.

Are there any easier ways to go about this?

2

What about this idea:

  • there is one original mesh in the center
  • there are 8 clones around it
  • cutting is done with clippingPlanes

Clipping planes are natively supported in Three.js, so you can easily cut a square (or a box). The illustrations shows the original mesh in gray, the clones in white, and the clipped-out parts in red. The red square shows what is left after clipping. This should be way simpler and faster than any CSG.

image
image727×462 29.5 KB

3

A thanks, I didn’t know about clippingPlanes.

Unfortunately this causes issues for faces that are directly on the clipping plane.

artifacts

Besides, I will need the cut result to calculate the flat (folded-out) state of the mesh.
So at the moment I am inclined to do the cutting myself (without CSG).

4

The dot pattern is z-fighting and is usually easily avoidable. However, if you need to fold, cut and then unfold the paper, then clipping planes are not useful.

I’d do the same. Hopefully, cutting with strictly vertical planes could make calculations easier.