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

Question

我看过Threejs站点中的裁剪示例和ThreeCSG操作，但我找不到一个同时具有“两者”的示例。

更具体地说，我需要一个PlaneBufferGeometry的PlaneGeometry，它可以应用像剪辑一样平滑的CSG操作，但是这个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，然后在生成的对象上使用剪裁平面。