Intersection arbitrary mesh with plane (in THREEJS)

Question

Is it currently possible to display the intersection of a mesh and a plane as below in THREEJS:

Display in red, green, yellow the intersection of meshes with a back plane with a texture on it.

If not, which would the best approach be:

• compute a "line geometry" at the intersection of the mesh and the plane in JavaScript, then renderer it
• apply a custom shader material to the mesh (with the plane parameters as a uniform) that only colors a pixel if the current triangle intersects the plane

For option #2 are there some demos online already of such shaders?

Thanks,

Nicolas

Answer 1

=== UPDATE 2022 ===

THREE-Mesh-BVH provides new efficient ways to create contours. That is how I currently do it:

• Adjust you geomeotry to a BVH tree
• Compute each triangle to pllane intersection as it is super fast thanks to the BVH tree.
• Live example: https://gkjohnson.github.io/three-mesh-bvh/example/bundle/clippedEdges.html

====

AMI now supports it (https://fnndsc.github.io/ami/#viewers_quadview)

The steps are:

1. Display intersection between a mesh and a plane

2. Post process the intersection to display the contours.

There are different techniques to display mesh/plane intersection:

1. With a stencil buffer (https://github.com/daign/clipping-with-caps)

2. Playing the the mesh opacity (https://github.com/FNNDSC/ami/tree/dev/examples/viewers_quadview)

All those techniques are computationally expensive at it requires 3 renders pass to display contours of 1 mesh and there may be a better approach but not sure what would be the best alternative.

HTH