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

Question

我查看了 Threejs 站点中的 Clipping 示例和 ThreeCSG 操作，但我找不到包含 "both".

的示例

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

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

Dynamic Clipping or CSG operations in Three.js

geometry

clipping

three.js

threecsg