javascriptreactjsthree.jsreact-three-fiberreact-three-drei

Text masking using react fiber/drei


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

The documentation has mask examples, and I tried a 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


Solution

  • 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>