Text masking using react fiber/drei

Question

Is it possible to mask a <Text>/<Text3D> or mask another object with <Text>/<Text3D>
like this image which is a text masking a cube.

I've seen the examples on the pmndrs/drei and tried few things like replacing some other objects but I can't make it work with a 2d or 3d text.
note: I am new to three.js and fiber but I know you need to use .json fonts

Answer 1

this should be possible via so called stencils, and your reference is correct.

However the stencil technique would not work with 2d text, because it’s using special shader instructions that are not supported by text 2d shader.

The text 2d is just grid objects with characters as texture, using special shader, and that’s not includes stencil semantics needed for it to work. (You can get the same by extending shader)

You should be able to use text 3d as stencil like so:

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

Then:

const stencil = useMask(1)

<Text3D
  bevelEnabled={false}    
  curveSegments={32}
  height={0.0}
  lineHeight={0.5}
  letterSpacing={-0.06}
  size={1.5}
  font="...">
   {`hello\nworld`}
   <meshStandardMaterial {...stencil}/>
</Text3D>