Does Three.js has advanced clipping?

I want make a Object3D dynamically clipping another Object3D, not basic planes clipping.

by the way, what is the proper way to remove a mesh(Object3D) from scene. The Docs hasn’t mentioned it, I think it’s essential for beginners.
is this OK?


Are you looking for operations with geometries? Like “union”, “subtract”, “intersect”.
If so, take a look at this forum topic Looking for Updated plug-in for CSG


Thank you.

The running demo link is dead, so I don’t know if it’s what I want or not.
I want the Object3D to be dynamically clipped, not permanently, like a animation effect.

Could you put more details to explanation of what you want to achieve?
Explanatory pics and an editable live code example would be great.

something like this:

Specifically about spheres, take a look at this topic: In the Orb (Shaders)
And this one: Experiment: Geometry Holes

1 Like

Thank you very much, that’s what I want.
But I know nothing about shaders, Threejs alone can’t do that?

no. Three.js can not do that by itself. You would need to write additional code or find a third-party project that implements those features on top of Three.js.

I would suggest you re-think your approach, consider what your goal is, and look for alternative ways to achieve it, perhaps Constructive Solid Geometry is not the only way to get what you want.

1 Like

Thanks, I am reading The Book of Shaders

It’s not an easy topic to get into, but it’s a lot of fun. If I write a book about shaders, I’ll probably call it “Fifty Shaders”


@Usnul “Fifty shaders of grain” :smiley: :+1:


On the subject of how to properly remove a mesh, you would need to first dispose of its geometry and material, and then remove it from the scene.

Pseudo code:

  const obj = scene.getObjectByName('meshy');


If your material has a texture, you need to dispose of that, too, using the dispose method of the Texture class. If you only remove the object from the scene, the memory allocated to your mesh won’t be freed up entirely, as the renderer still holds references to them (if I’ve understood things correctly).

Generally speaking, when it comes to cleaning up a scene, I would advise you to take a look at the docs and see which classes have a dispose method.


I would add 2 points here:

1 - dispose after object is removed from the scene, not before
2 - if you wish to reuse the object in the future - don’t dispose of it

Most of the time it probably doesn’t matter, but better learn good habits :cat:


Why ? Would the parent otherwise keep a reference to the mesh ?

I tried just now, some errors occurred

obj.geometry.dispose(); // undefined
obj.material.dispose(); // undefined

This works fine, but since it doesn’t exist anymore, do I really need to dispose it?


Suppose you do this:



renderer.render(scene, camera);

You are trying to render disposed elements.


No I’m not.
The object to be removed will never be used again.

I think his remark was in regard to the question of the correct order of operations for disposing of an element, and not your case, per se. As for not being able to dispose of something because it is undefined, do a console log on the parent object; that should help you get a grip of the data structure of your object and how you have to go about disposing of things. The example I posted above was just pseudo code for the very simple case where you have a scene that contains a mesh that contains a geometry and a material.

Regarding clipping, did you try playing with depth tests?

Regarding disposing. You have to keep in mind that not all objects are represented in the main memory, some exist on the gpu. You could release the references to a geometry and let it be garbage collected, but without calling dispose the geometry will remain on the gpu. You can’t actually just destroy an object in JS, as long as you have a reference for it it will exist. Disposing thus consists of two different things. Get it off the gpu, get it out of your memory (GC).

1 Like

I think this is the right way of removing objects from scene: