Dynamic Clipping or CSG operations in Three.js

Question

I've taken a look at the Clipping examples in the Threejs site, and the ThreeCSG operations, but I am not able to find an example that has "both".

To be more specific, I require a PlaneGeometry of PlaneBufferGeometry that applies a CSG operation as smooth as a Clipping, but this PlaneGeometry could be moving, changing its position and orientation.

As an example, a Sphere and a Plane are on the scene, the Plane starts facing in Z and is spinning in Y, cutting one side of the sphere at all times, but the plane could be a box or any other object.

Is it possible?

score 0 · Accepted Answer · answered Feb 01 '17 at 12:29

Lets take a look at two seperate problems.

For Plane Clipping things are pretty easy to do.

// 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
                } ),

As you can see here .

Note that the clippingPlanes are an array so you could supply more than one at a time.

As you can see here .

The key difference between clipping and CSG is that during clipping no new geometry is created since it only checks if the triangle should be renderer or not.

For CSG its different since it creates new geometry for every operation.

Think of CSG as NewObject = ObjectA - ObjectB.

This is a much more tasking algorithm running and might not be possible to do in realtime depending on the complexity of your objects.

So it would be possible to combine CSG and then using clipping planes on the resulting object.

Dynamic Clipping or CSG operations in Three.js

1 Answers1