How can I place a GLTF model behind a stencil mask in three.js?

Solution 1:

I figured it out!

Example of the model hiding correctly behind the stencil: https://codepen.io/jattfield/pen/jOaEZmJ

Model hiding correctly behind the stencil

skinnedMesh.material.stencilFunc = THREE.EqualStencilFunc;
skinnedMesh.material.stencilFuncMask =  0xFF;
skinnedMesh.material.stencilZPass =  THREE.ReplaceStencilOp;
skinnedMesh.material.stencilZPass =  THREE.ReplaceStencilOp;
skinnedMesh.material.needsUpdate = true;
insideGroup.add(gltf.scene);
gltf.scene.renderOrder = 3; // This was the KEY !!!!

The gltf.scene HAS to be rendered after the stencil mask. I had used a renderOrder on the "insideGroup" I was placing it in, but it seems this was not enough. Interestingly, when I attempt to place models with multiple meshes, each mesh also has to be given a specific renderOrder.

I can find very little documentation on this kind of stuff. I have what I need working, but if there is anybody out there also working with models and stencil masks I'd love to see it. Thanks.