Three.js：如何使用平面将物体分成两部分？

Posted 2023-03-23

【中文标题】Three.js：如何使用平面将物体分成两部分？

【英文标题】：Three.js: how to use a plane to cut objects in 2 parts?

【发布时间】：2020-09-21 05:41:07

【问题描述】：

我有一个复杂的对象，即一个盒子，我想动态切割它。这个jsFiddle就是一个很简单的例子：jsFiddle

非常简单的平面

var plane = new THREE.Mesh( geometry, material3 );
plane.rotation.x =1.3; // -Math.PI / 2;
gui.add(plane.rotation, "x", 0.1, Math.PI / 2).name("angle");
gui.add(plane.position, "y", -1, 1).name("h");
scene.add( plane );

我想从我的对象中移除上部。就像用刀从苹果上切下一块。

飞机就是刀：在我的示例中，您可以使用 2 个控件来上下移动飞机或改变角度。

你能帮我隐藏对象中移除的部分吗？

【问题讨论】：

要开始，请参阅：threejs.org/examples/?q=clipping。

【参考方案1】：

你有两个选择：

您可以使用clipping，就像上面提到的 WestLangley。 剪裁不会修改顶点几何，它只是视觉上的。 不具破坏性，因此非常适合制作动画或进行持续更新。 剪裁主要是用几个平面而不是复杂的几何图形来完成的。 您可以对Constructive Solid Geometry 使用布尔运算。 布尔值确实会影响可以导出的顶点几何图形。 操作具有“破坏性”，因此一旦完成就无法进行更新。 可以对复杂的几何图形执行布尔运算，只要它们是“流形的”。

布尔运算要求两个几何都为manifold geometries 才能工作。这意味着两个网格都必须是封闭的，没有开放的面。您不能使用无限薄的平面，因此您的 JSFiddle 中的示例不起作用。您需要给每一面增加一点厚度，例如使用宽度为 0.0001 的盒子而不是平面。

【讨论】：

谢谢@Marquizzo！我正在使用选项 1，它看起来很棒。我还有另一个问题，因为我的主要对象在被切断时似乎是“空的”。您知道是否有“填充”对象部分的选项或设置？