How can I use text as holes in a shape?

Questions
,
1

How can I use text as holes in a shape?

if I have a threejs shape

const shape = new THREE.Shape();

can I use the text hello as holes of it?

shape.holes = [...]

Thanks in advance.

2

Notice this line in TextGeometry

See documentation on FontLoader. Returns a font, which is an array of Shapes representing the font.

Use those shapes has holes in your original shape.

If it works, please share.

3

thanks. yes, last night I found that array too.

I created a geometry with the text and I extracted the shapes array from it.
I mixed that with an extruded shape.

        let text = `hello`;

        const textGeo = new TextGeometry(text, {
          font: font,
          size: 10,
        });

        const textShape = new THREE.Shape();
        textShape.moveTo(0, 0);
        textShape.lineTo(tileWidth, 0);
        textShape.lineTo(tileWidth, tileHeight);
        textShape.lineTo(0, tileHeight);
        textShape.lineTo(0, 0);

        for (let s of textGeo.parameters.shapes) {
          let points = s.extractPoints().shape;
          let hole = new THREE.Path();

          [x, y] = points[0];
          hole.moveTo(6 + x, 50 + y);

          for (let i = 1; i < points.length; i++) {
            [x, y] = points[i];
            hole.lineTo(6 + x, 50 + y);
          }

          textShape.holes.push(hole);
        }

        const textBox = new THREE.ExtrudeGeometry(textShape, {
          steps: 1,
          depth: 1,
        });
4

If the text shape has holes (e.g. characters O, R, D, B), they must be processed with care, as holes within holes most likely are not supported.