How can I embed 2D text into my mesh?

Questions
1

Hey everyone. First of all, I am a total beginner in THREE so I am sorry if I am using/mentioned the wrong terms.

So, I have this design:

Screenshot 2020-01-14 at 15.00.05|690x406

I have (sort of) successfully managed to recreate the walls and the lights:

Now, how can I add a 2d text on the right side wall?
I’ve tried using TextGeometry, but I don’t think that’s the solution for this.

Thank you very much.

Any help would be appreciated!

2

I suggest you apply a texture onto the plane. AFAICS, you are using an instance of PlaneBufferGeometry for the geometry so you already have proper texture coordinates. The texture can be create offline with Photoshop or dynamically by writing the text onto a 2D canvas and using it as a data source for your texture. In this case, you are not loading the texture from the backend via TextureLoader but creating an instance of CanvasTexture and applying the canvas element as a ctor argument.

3

I tried to place 2D text on mesh using CanvasTexture but its getting stretched as I have dynamic mesh and don’t know how to locate the coordinates.

const goodsShapeGeometry = new THREE.ExtrudeBufferGeometry([goodsShape], {
    steps: 1,
    depth: 0,
    bevelEnabled: false,
    curveSegments: 32,
  });
  
  var textCanvas = document.createElement("canvas");
  textCanvas.width = textCenter.y * 100;
  textCanvas.height = textCenter.x * 100;
  var ctx = textCanvas.getContext("2d");
  ctx.fillStyle = "white";
  ctx.fillRect(0, 0, textCanvas.width, textCanvas.height);
  ctx.font = `30px Arial`;
  ctx.fillStyle = "black";
  ctx.shadowColor = "rgba(255, 255, 255, 255)";
  ctx.textAlign = "center";
  ctx.rotate(-Math.PI / 2);
  ctx.fillText("Zone", -textCanvas.width / 2, textCanvas.height / 2);
  const myTexture = new THREE.CanvasTexture(textCanvas);
  const goodsMaterial = new THREE.MeshStandardMaterial({
    color: 0xffffff,
    map: myTexture,
  });

Screenshot 2022-06-24 at 3.46.30 PM
Screenshot 2022-06-24 at 3.46.30 PM1438×791 84.2 KB

4

have you used blender before? it’s usually easier to just build the scene out in blender, you can make the texture in figma or whatever you prefer and just align it over a mesh. then export everything as a glb. fiddling with textgeometry or anything else really in threejs seems too much work.

5

No I don’t have any idea about blender so far and are you trying to say that I should use image from figma and than map to the texture??

6

you can use whatever software you’re comfortable with, looking at the above imagine you posted yes i would use figma myself. in the end a texture is just an image. you can also align textures with code though it’s a bit fiddly:

texture.wrapS = texture wrapT = THREE.RepeatMapping
texture.repeat.set(1, 1)
texture.offset.set(0, 0)

look into the docs for the meaning of those two vectors, you can position, scale and stretch textures with them.

you can ofc also 3d transform real html and place it onto a mesh, look into css3drenderer. especially for that button underneath, no idea how you want to make it interactive with just an image. i don’t have a vanilla example but it’s the same in principle, the screen overlay here is real html that can be interacted with: Mixing HTML and WebGL w/ occlusion - CodeSandbox

7

Maybe you can use this :thinking:

From the
Collection of examples from discourse.threejs.org

see 2020 eXtended eXamples

=> https://codepen.io/trusktr/pen/BaovQBm/2e66e07af44b8f69c9cf92214563e29d