Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Three JS - How to cut a 3D object with Y plane?

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.

like image 709
Pouchopa Avatar asked May 11 '17 12:05

Pouchopa


1 Answers

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);
like image 90
Dan Bechard Avatar answered Oct 06 '22 00:10

Dan Bechard