8

Is it possible, with Three JS, to cut a mesh or an object with a plane (mostly with Y axis) that we can move ? I want the same functionality that display in this picture :

Y plane with 3D object

The goal is to keep the mesh intact to allow for the user moving the plane and see the mesh in function of the Y plane.

Pouchopa
  • 253
  • 1
  • 3
  • 11
  • Can you be more specific about what "cut" means? Should we assume you want to add new vertices at the planar intersection to keep the mesh intact? Do you want a solid face, or multiple faces only on solid parts? E.g. In your image the center seems to be hollow, are you trying to preserve that along the cutting edge? – Dan Bechard May 11 '17 at 13:01
  • If you don't care about having a valid mesh, and just want to render something that looks "cut", you can achieve that in a shader by discarding the fragments on the opposite side of the plane. – Dan Bechard May 11 '17 at 13:06
  • 2
    See any of the three.js clipping examples. For example: http://threejs.org/examples/webgl_clipping.html – WestLangley May 11 '17 at 13:07
  • Here's a video of the effect for anyone who can't load WebGL: https://vimeo.com/144777216 – Dan Bechard May 11 '17 at 13:08

1 Answers1

8

Based on WestLangley's comment, the following code from the sample link he posted seems to be the relevant bit for what you're trying to achieve:

// ***** Clipping planes: *****
var localPlane = new THREE.Plane(new THREE.Vector3(0, -1, 0), 0.8);

// Geometry
var material = new THREE.MeshPhongMaterial({
    color: 0x80ee10,
    shininess: 100,
    side: THREE.DoubleSide,

    // ***** Clipping setup (material): *****
    clippingPlanes: [ localPlane ],
    clipShadows: true
});

var geometry = new THREE.TorusKnotBufferGeometry(0.4, 0.08, 95, 20);

var mesh = new THREE.Mesh(geometry, material);
mesh.castShadow = true;
scene.add(mesh);
Dan Bechard
  • 5,104
  • 3
  • 34
  • 51
  • Thank you for the answer and for have been so fast. I didn't see this example (there are a lot!). I will look at this and see if it works for my 3D object. – Pouchopa May 11 '17 at 13:28
  • 1
    This really helped! One thing I'd add is that in order for this to work, it's necessary to set the renderer's `localClippingEnabled` property to `true`. Example: `const renderer = new THREE.WebGLRenderer({ canvas: myExampleCanvas }); renderer.localClippingEnabled = true;` Relevant docs: https://threejs.org/docs/index.html?q=material#api/en/materials/Material.clippingPlanes – yaphi1 Nov 19 '22 at 16:27
  • @yaphi1 That's great context, thanks for the addendum! – Dan Bechard Mar 25 '23 at 15:34