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 di…

@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…

// … step 11: text contains two different examples. The image belongs to the canvas text on the box. I thought it was about the cuboids?

@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 re…

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?

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…

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

[image] Vayun_Biyani: Struggling to implement #11 with react three fiber. Could you please point me in the right direction? Sorry, but I don’t use react three fiber and have no idea about it at all. :frowning_face:

[image] Vayun_Biyani: plement #11 with react thr drei has components for that [image] Using render texture through decals - CodeSandbox Using render texture through decals by drcmda using @react-three/drei, @react-three/fiber, @types/three, leva, react, react-dom, react-scripts, …

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:

Mapping Text onto faces of Cube

Questions

hofk April 14, 2021, 6:02pm 2

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

Topic		Replies	Views
How to add html elements to the faces of a cube Questions textures , materials , geometry	7	604	March 18, 2024
𝔽 How many ways to load a font in Three.js? Resources fonts-text	37	23103	March 13, 2022
Text on faces of Icosahedron geometry Questions geometry	8	1645	September 3, 2021
An example of text to canvas to texture to material to mesh. Not too difficult Resources	15	14255	April 21, 2021
Can we add text top of a mesh/object/material? Questions text , react , threejs , react-three-fiber	9	6489	May 18, 2022

Mapping Text onto faces of Cube

Related topics