Hi. Can someone help me with my issue?
I am trying to use the stencil buffer in three.js, but the examples I found do not explain how to do this step by step. My question: https://stackoverflow.com/questions/60129665/using-stencil-buffer-in-three-js
2 Likes
Yes, this is what I need. But my question is how can I do this. In addition, I saw an example of three.js https://threejs.org/examples/?q=stencil#webgl_clipping_stencil, but this examples does not explain how to do this
well, you are in luck, because modern web browsers allow you to read the page source 
in case if you need some explanation behind how it was done - check 3.4 Constructive Solid Geometry with the Stencil Buffer - but tbh, they suck at explaining things.
1 Like
I may not have asked the right question. I read this theory, but I understand how to use that in three.js
well, 3js has a bunch of stencil settings on materials that you can check in the docs. so if you turn renderer-s automatic sorting off, and place the objects with configured materials in specific order, they will be rendered in that order, and the stencil operations specified in materials will be performed in that order. if you do not turn renderer-s automatic sorting off, you have to rely on pre/post render callbacks to do this, which makes even bigger mess imho.
How can I add a display of the sides that should be visible in the holes?
try drawing the sphere with material.side = THREE.BackSide without any stencil settings first wait, that will go outside of the pyramid… maybe first the pyramid to stencil with the depthWrite = false and colorWrite = false, and then the back of the sphere clipped by stencil; and then the rest of stuff you have now
Is the code for this demo available?
OLDMAN