How to cut out text shaped hole from a plane?

Basically what I am trying to accomplish is to have some text in front of a plane, and then a more detailed scene behind the plane. I’d then like to be able to see through the plane but only through the text, and not the rest of the plane.

Any ideas on how to accomplish this?

Probably a few ways to do this, but I would consider:

  1. Draw the text with .stencilWrite = true, .depthWrite = false, and .colorWrite = false
  2. Draw the plane with .stencilFunc = THREE.EqualStencilFunc, .stencilRef = 0
  3. Draw the rest of the scene normally

You’ll need to assign object.renderOrder to get the drawing order described above. I assume you’re using geometry for the text; it may be a bit more difficult with SDF or MSDF-based text like three-bmfont-text.

4 Likes

You can use a canvas texture, when you can create а text mask. For example

const canvas = document.createElement('canvas'),
      ctx = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
ctx.globalCompositeOperation = "xor";
ctx.fillStyle = "fff";
ctx.fillRect(0,0,width, height); //or drawImage() if you want use it like a map
ctx.(text, x, y);
//...
plane.material.map = new THREE.CanvasTexture(canvas);
plane.material.transparent = true;
1 Like

Maybe alpha mapping could help?

You just need to make an all white image and write the text in black, then pass that image into the alpha map attribute of a material to make the black text part transparent.

https://threejs.org/docs/#api/en/materials/MeshBasicMaterial.alphaMap

Forewarning though - alpha textures can have issues which can be very annoying to fix.

1 Like