使用反应光纤/drei的文本掩蔽

Question

可以用<Text>/<Text3D>掩蔽另一个对象还是用<Text>/<Text3D>掩蔽另一个对象

就像这个图像，它是一个隐藏立方体的文本。

我在pmndrs/drei上看过这些例子，也很少尝试替换其他对象，但是我无法让它与2d或3d文本一起工作。

注意:我对three.js和光纤很陌生，但我知道你需要使用.json字体。

Answer 1

这应该可以通过所谓的模板，你的参考是正确的。

然而，模板技术将不适用于2d文本，因为它使用的是特殊的着色器指令，不支持文本2d着色器。

文本2d只是以字符作为纹理的网格对象，使用特殊的着色器，这不包括工作所需的模板语义。(您可以通过扩展着色器获得相同的结果)

您应该能够使用文本3d作为模板，如下所示：

<Mask id={1}>
  <Text3D/>
<Mask/>

然后：

const stencil = useMask(1)

<Text3D>
   Text
   <meshStanadrtMaterial {…stencil}/>
<Text3D/>