Clipping Material along cubic shapes

Questions
,
1

I am using Material.clippingPlanes to try and clip Meshes along a cubic shape. This works fine for one cube, but I have an issue if I try to apply my current solution to two or more intersecting cubes.

My Meshes are usually loaded through THREE loaders such as OBJLoader for example. They also almost all use MeshLambertMaterial.

My current solution is as follows :

// box3 is the clipping cube.
// backwards/forwards/left/right/upward/downward are the normal vectors for each face.
// mesh is the mesh that should get clipped by the cube.

const min = box3.min;
const max = box3.max;

// Box faces as planes
const frontPlane = new THREE.Plane();
frontPlane.setFromNormalAndCoplanarPoint(forward, min);

const leftPlane = new THREE.Plane();
leftPlane.setFromNormalAndCoplanarPoint(right, min);

const rightPlane = new THREE.Plane();
rightPlane.setFromNormalAndCoplanarPoint(left, max);

const backPlane = new THREE.Plane();
backPlane.setFromNormalAndCoplanarPoint(backward , max);

const topPlane = new THREE.Plane();
topPlane.setFromNormalAndCoplanarPoint(downward, max);

const bottomPlane = new THREE.Plane();
bottomPlane.setFromNormalAndCoplanarPoint(upward, min);

const clippingPlanes = [frontPlane, leftPlane, rightPlane, backPlane, topPlane, bottomPlane];
mesh.material.clippingPlanes = clippingPlanes;
mesh.material.clipIntersection = false;

As stated, this works fine for one cube.

What happens if I try this approach for two or more cubes by concatenating all clippingPlanes, is “all that is contained in the intersection of all cubes is rendered, anything else is not”.

I would like to have “all that is contained in the union of all cubes is rendered, anything else is not”.

How can I achieve such a result with this method ?

2

You can achieve it, but you might not like the cost for this.

You want something that is more appropriate for CSG. Clipping planes are very rudimentary technique. If you force them to do union of clipping boxes, this might be considered as a computer graphics brutality.

Anyway, here is a demo that cuts an ambulance with three clipping boxes and the union of the clipped meshes are visible. There is a second ambulance just as a reference how it looks like unclipped. Rotate the scene to inspect the clipping.

Needless to say, I am not proud of this code.

https://codepen.io/boytchev/full/KKYJeyO

image

3

Thanks for your reply ! Your codepen is the result I expected.
If I understand correctly, you’re cloning the model as many times as there are cubes, and clipping each of them separately ?
I understand it is indeed costly then. I don’t know much about clipping, so if there is a better option, I’m all ears.

Thanks again !

4

Yes, exactly. It is literaily “union of box intersections”. The geometries are not multiplicated, only the materials and the number of object renderings are.

It depends on your use case. The cost could be negligible for situations like in my demo.

Intersections of complex shapes is done with CSG, i.e. Constructive Solid Geometry. There are several libraries for CSG, that can be used together with Three.js. For complex use cases, I’d recommend three-bvh-csg.

5

Maybe this topic will be also interesting: Clipping Solids (SDF functions)

1 Like
6

three-bvh-csg is precisely what I needed. Thanks a lot !

1 Like