CODEWITHSUNDEEP
javascriptthree.jsclipping
Uncoke
Uncoke

Reputation: 1902

Three.js: how to use a plane to cut objects in 2 parts?

I have a complex object, i.e. a box, and I would like to cut it dynamically. This jsFiddle is a very simple example:jsFiddle

Very simple plane

var plane = new THREE.Mesh( geometry, material3 );
plane.rotation.x =1.3; // -Math.PI / 2;
gui.add(plane.rotation, "x", 0.1, Math.PI / 2).name("angle");
gui.add(plane.position, "y", -1, 1).name("h");
scene.add( plane );

I would like to remove from my object the upper part. Just like to cut off a piece from an apple using a knife.

The plane is the knife: In my example, you can play with 2 controls to move the plane up and down or change the angle.

example

Can you help me to hide the removed part from the object?

Upvotes: 0

Views: 2717

Answers (1)

M -
M -

Reputation: 28472

You've got two options:

  1. You could use clipping as WestLangley mentioned above.
    • Clipping does not modify the vertex geometry, it's only visual.
    • Is non-destructive, so it's good for animating or making constant updates.
    • Clipping is mostly done with a few planes instead of complex geometry.
  2. You could use a boolean operation with Constructive Solid Geometry.
    • Boolean does affect the vertex geometry, which can be exported.
    • Operation is "destructive", so you can't make updates once it's done.
    • Boolean can be performed with complex geometries, as long as they're "manifold".

Boolean operations require both geometries to be manifold geometries in order to work. This means both meshes have to be closed, without open faces. You cannot use infinitely thin planes, so the example in your JSFiddle wouldn't work. You would need to give each side a little bit of thickness, like using a box with a width of 0.0001 instead of a plane.

Upvotes: 2

Related Questions