如何在 three.js 中将 GLTF 模型放在模板蒙版后面？

【问题标题】：How can I place a GLTF model behind a stencil mask in three.js?如何在 three.js 中将 GLTF 模型放在模板蒙版后面？
【发布时间】：2022-02-13 14:11:37
【问题描述】：

我在 Three.js 中使用模板蒙版来创建门户效果。当我可以控制材料时，它可以在网格上正常工作。但是，当我使用模型的材料加载 gltf 模型时，我无法让它隐藏在模板蒙版之外。

See this example screenshot here with the desired effect with a cube mesh

Screenshot of GLTF model unable to hide outside the stencil mask

    // Stencil rules to make material hide 
   material.stencilWrite = true;
   material.stencilFunc =  THREE.EqualStencilFunc;
   material.stencilRef =  1;
   material.stencilFuncMask =  0xFF;
   material.stencilFail =  THREE.KeepStencilOp;
   material.stencilZFail =  THREE.KeepStencilOp;
   material.stencilZPass =  THREE.ReplaceStencilOp;

这是一个包含网格和 gltf 模型的代码笔： https://codepen.io/jattfield/pen/GRMzRjw

感谢您的指导。

【问题讨论】：

标签： three.js webgl portal gltf

【解决方案1】：

我想通了！

模型正确隐藏在模板后面的示例： 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 !!!!

gltf.scene HAS 在模板遮罩之后呈现。我在放置它的“insideGroup”上使用了renderOrder，但这似乎还不够。有趣的是，当我尝试放置具有多个网格的模型时，还必须为每个网格指定一个特定的renderOrder。

我几乎找不到关于这类东西的文档。我有我需要工作的东西，但如果有人也在使用模型和模板面具，我很乐意看到它。谢谢。

【讨论】：