Three.js 中的动态剪辑或 CSG 操作

Question

我查看了 Threejs 站点中的 Clipping 示例和 ThreeCSG 操作，但我找不到具有“两者”的示例。

更具体地说，我需要 PlaneBufferGeometry 的 PlaneGeometry，它应用 CSG 操作与 Clipping 一样平滑，但此 PlaneGeometry 可能会移动，改变其位置和方向。

例如，场景中有一个球体和一个平面，平面开始面向 Z 并沿 Y 方向旋转，始终切割球体的一侧，但平面可以是一个盒子或任何其他对象.

有可能吗？

Answer 1

让我们来看看两个单独的问题。

对于平面裁剪来说，事情很容易做到。

// plane in Z Direction
var plane = new THREE.Plane( new THREE.Vector3( 0, 0, 1), 1);
// tell the renderer to use it for clipping
renderer.clippingPlanes = [ plane ];
// enable clipping in the renderer
renderer.localClippingEnabled = true;
// create a new PhongMaterial
var material = new THREE.MeshPhongMaterial( {
                    side: THREE.DoubleSide,    // to be able to look inside
                    clippingPlanes: [ plane ], // the clipping plane
                    clipShadows: true          // also clip shadows
                } ),

如您所见here。

请注意，clippingPlanes 是一个数组，因此您一次可以提供多个。

如您所见here。

裁剪和 CSG 之间的主要区别在于，在裁剪期间不会创建新几何体，因为它只检查三角形是否应该是渲染器。

对于 CSG，它有所不同，因为它为每个操作创建新的几何图形。

将 CSG 视为NewObject = ObjectA - ObjectB。

这是一种运行任务更多的算法，可能无法实时执行，具体取决于对象的复杂性。

因此可以组合 CSG，然后在生成的对象上使用剪切平面。