How to cut a figure (3D model) with a plane into 2 parts?

please tell me how to cut a figure into a plane into 2 parts, something like in the picture

I tried to do as on this link, but it did not work, maybe someone else will tell you how you can divide the figure into 2 parts Three JS – How to cut a 3D object with Y plane?

Answer

There are two ways to do this:

Cloning and Clipping planes

First, turn on local clipping planes. This will allow you to clip a mesh without affecting another mesh.

const renderer = new WebGLRenderer()
renderer.localClippingEnabled = true

Next, clone the mesh. Ideally you would create an instance of the Mesh, but the idea is that you have a copy of the shape. ALSO, clone and set the material of the copy.

let clonedMesh = yourMesh.clone()
clonedMesh.material = clonedMesh.material.clone()

Now, you want to create two clipping planes, “facing” in opposite directions, and set one on your original mesh, and the other on the clone. This is done through the Material (which is why you needed a clone and not a reference). (Note: The normal points in the direction that the clipping plane will KEEP visible.)

let localPosition = new Vector3()
let normal = new Vector3(0, 1, 0) // +Y as an example

let clipPlane1 = new Plane().setFromNormalAndCoplanarPoint( normal, localPosition )
normal.negate() // flips the normal
let clipPlane2 = new Plane().setFromNormalAndCoplanarPoint( normal, localPosition )

originalMesh.material.clippingPlanes = [ clipPlane1 ]
clonedMesh.material.clippingPlanes = [ clipPlane2 ]

Now when you render, the two shapes, they will clip in different directions, exposing only their “side” of the sliced shape. Because they are local to each shape, you can transform the shape, and the clipping plane for that shape will follow it.

Geometry-based division

This is a much bigger topic, and I’m not going to get into details. The general idea is that you have a plane that intersects your geometry. If a triangle in your geometry intersects the plane, then you need to replace it with new triangles such that their edges will lay ON the plane, rather than through it. You would perform this operation in both directions, creating two distinct geometry buffers, which would need assigned to distinct Meshes.

There are likely tools compatible with three.js that can perform these operations for you. Unfortunately, I don’t know of any off the top of my head.