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

Question

我有一个复杂的对象，即一个盒子，我想动态切割它。这个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 个控件来上下移动飞机或改变角度。

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

Answer 1

你有两个选择：

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

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