Mapping Text onto faces of Cube

Questions
1

I know it’s possible to map images to the 6 different sides of a Cube, but how do you map text (either single characters or full words) to each side of a Cube?

I’m trying to do this using a combination of THREE.TextGeometry and map - but is it even possible to map a TextGeometry? Or do I need a different approach, like making an actual Mesh from each of the text-words, then somehow mapping that mesh onto the Cube’s mesh?

I made a fiddle here - it works with the images, but it looks like the fontLoader - on line 49 - isn’t working:

https://jsfiddle.net/gilomer88/x2rsadm6/45/

2

Have you seen the BeginnerExample BeginnerExample from the Collection of examples from discourse.threejs.org?
// … step 11: text

2021-04-14 20.02.02
2021-04-14 20.02.021004×523 87.8 KB

3

@hofk Thank you for that link - it’s somewhat helpful in that it’s showing you can do this using a THREE.Group() - but how do you know the coordinates and angles of each side of the Cube so you can properly add a text-mesh to each size correctly?
And what happens if you change the size or angle of the Cube?

This is why I asked about using map, because it always automatically adjusts things for you - so for example if you change the Cube’s size, map would still work cause it would know how and where to place all your additional text textures or meshes - know what I mean?

Here’s the new fiddle link:

https://jsfiddle.net/gilomer88/x2rsadm6/45/

4

// … step 11: text contains two different examples.

The image belongs to the canvas text on the box.

I thought it was about the cuboids?

5

@hofk You’re right, there are 2 examples in Step 11 - but the 2nd. one uses Canvas which gives you totally flat text - and what I’m looking for is nice, 3D text where you can really change the thickness and bevel of the letters - y’know, get all those wonderful qualities that makes us want to use real 3D in the first place - like the image I attached.

Is that possible to do with Canvas?

Screen Shot 2021-04-14 at 2.50.21 PM
Screen Shot 2021-04-14 at 2.50.21 PM529×545 75.6 KB

6

Unless I’m totally wrong, canvas text is flat.

But there are many ways to create text.
Have you seen this yet? 𝔽 How many ways to load a font in Three.js?

7

I think I figured it out: I’ll just set the (X, Y, Z) coords of each Text-Mesh so that it lines up with each face of the Cube.
I’m gonna try it out and chime back in…

8

@hofk Struggling to implement #11 with react three fiber. Could you please point me in the right direction?

9

Sorry, but I don’t use react three fiber and have no idea about it at all. :frowning_face:

1 Like
10

drei has components for that

this is using drei/Decal + drei/RenderTexture. the contents are interactive, they receive pointer events, you can also nest (in that demo the decals dodecahedron itself has a decal)

Screenshot 2022-10-26 at 18.00.43
Screenshot 2022-10-26 at 18.00.431886×988 76.9 KB

if this is just about cube faces and not decals you can use rendertexture still

<mesh>
  <boxGeometry />
  <meshBasicMaterial attach="material-0">
    <RenderTexture attach="map"><Text>hello</Text><RenderTexture />
  </meshBasicMaterial>
  ...
1 Like
11

Np @hofk !

@drcmda Wow this is exactly what I need! Thanks! Although I’ve been playing around with it for hours and can’t seem to make it work with a box geometry. I’d be really grateful if you could help me out here :pray:

12

do you want decals or just a texture on that box?

13

A plane texture will do for now

14

plane is too easy, here’s a box Using render texture through decals (forked) - CodeSandbox

for a plane you just need this:

<mesh>
  <planeGeometry />
  <meshStandardMaterial>
    <RenderTexture attach="map">...
1 Like
15

That demo is so clever. I just couldn’t do that in vanilla. I mean, clicking on that Dodecahedron.

1 Like
16

Sweet! Thanks!!

17

Raycaster returns uv. Subtract 0.5, multiply with 2, use these coords for raycaster again for the nested scene’s camera. That’s all. Not that elegant, like in React, but not impossible.

2 Likes
18

Demo:

4 Likes
19

yes, it’s using uv. what makes it a little special is composition. you can take the whole scene and add it into yet another render texture ad infinitum and you still have events within events within events. not impossible, but in a generic, re-usable way, wouldn’t know how tbh. it’s a rare use case though.

3 Likes