使用react fiber/drei屏蔽文本

Question

是否可以用<Text>/<Text3D>屏蔽<Text>/<Text3D>或屏蔽另一个对象
喜欢这个图片，它是一个文本屏蔽立方体。

我看过pmndrs/drei上的例子，并尝试了一些事情，比如替换一些其他对象，但我无法使其与2d或3d文本一起工作。
注意:我是three.js和fiber的新手，但我知道你需要使用。json字体

Answer 1

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

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

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

你应该能够使用文本3d作为模板，像这样:

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

:

const stencil = useMask(1)
<Text3D
bevelEnabled={false}    
curveSegments={32}
height={0.0}
lineHeight={0.5}
letterSpacing={-0.06}
size={1.5}
font="...">
{`hellonworld`}
<meshStandardMaterial {...stencil}/>
</Text3D>