How to create holes in objects without modifying the mesh structure in Three.js?

I want to create holes in objects without modifying the mesh structure.
Image initial scene:
image with sphere removed.

Can I resolve this problem by stencil and shader?

You have two alternatives that I know if:

  1. Write your own custom shaders, or
  2. a material’s .alphaMap texture.

But if you want to use custom geometry, it’s going to be very difficult to calculate this in the shader code.

1 Like

I know you don’t want to change the mesh, but if you have to…there’s Manthax’s fork of this… Link

But there is a fully explored method of how to do what you want with shaders… User prisoner849 here made one with a fish bowl and a cloud, there was another with a wood grain cube being cut with an invisible sphere.
I cannot find the links to them right now.

Possibly people that see this will know what I’m talking about.

Edit: or was it User gkjohnson with something like this… Link

Hello, @marquizzo @GlifTek Thank you for your answers.
However, please look at this video : I Learn About Stencil Buffers and Cutting Holes in Things - YouTube

Actually, I’m looking for a way to implement this in Three.js.

Did you see that?

In the Orb (Shaders) - #3 by prisoner849

From the Collection of examples from



Fantastic! Thank you @hofk
Can I use any shape instead of the sphere?

For instance, I want to use a box.

Then you have to define a box (center, size), pass it in uniforms of shader and process it there with your logics for clipping.

1 Like

Yea that’s it. Finally found it late last night but forgot to post it.