three.js - 与平面相交的任意网格(在 THREEJS 中)

Question

目前是否可以在 THREEJS 中显示如下所示的网格和平面的交集:

以红色、绿色、黄色显示网格与带有纹理的背板的交集。

如果不是，最好的方法是:

• 在 JavaScript 中计算网格和平面相交处的“线几何”，然后渲染它
• 将自定义着色器 Material 应用于网格(将平面参数作为统一参数)，仅在当前三角形与平面相交时才为像素着色

对于选项 #2，是否已经有一些此类着色器的在线演示？

谢谢，

尼古拉斯

Answer 1

=== 2022 年更新 ===

THREE-Mesh-BVH提供了创建轮廓的新的有效方法。这就是我目前的做法:

• 将几何调整为 BVH 树
• 计算每个三角形与平面的交点，因为使用 BVH 树速度非常快。
• 实例:https://gkjohnson.github.io/three-mesh-bvh/example/bundle/clippedEdges.html

====

AMI 现在支持它 ( https://fnndsc.github.io/ami/#viewers_quadview )

步骤是:

1. 显示网格与平面的交集

2. 后处理交点以显示等高线。

显示网格/平面相交有不同的技术:

1. 使用模板缓冲区 ( https://github.com/daign/clipping-with-caps )

2. 播放网格不透明度 ( https://github.com/FNNDSC/ami/tree/dev/examples/viewers_quadview )

所有这些技术在计算上都是昂贵的，因为它需要 3 个渲染 channel 来显示 1 个网格的轮廓，可能有更好的方法但不确定什么是最好的选择。

HTH