Three.js: text on a cube surface

[corsaronero]

hey everybody,

is there a convenient way to display text on a cube surface?

with CanvasRenderer

Corsaronero

[mrdoob]

Nope, you'll need to create a new canvas, write text on it and use that as a texture.

[corsaronero]

Ok thanks now works!

Also how can I paint the cube?
if I add color, text color not color face

var x = document.createElement("canvas");
var xc = x.getContext("2d");
x.width = x.height = 128;
xc.shadowColor = "#000";
xc.shadowBlur = 7;
xc.fillStyle = "orange";
xc.font = "30pt arial bold";
xc.fillText('Test', 10, 64);

var xm = new THREE.MeshBasicMaterial({ map: new THREE.Texture(x), transparent: true });
xm.map.needsUpdate = true;

var mesh = new THREE.Mesh(new THREE.CubeGeometry(150, 150, 150), xm);
mesh.position.x = -400;
mesh.position.y = 0;
mesh.position.z = 0;
mesh.doubleSided = true;
scene.add(mesh);

[mrdoob]

You mean this?

xc.fillStyle = "red";
xc.fillRect(0, 0, 128, 128);

xc.fillStyle = "orange";
xc.font = "30pt arial bold";
xc.fillText('Test', 10, 64);

[bhupendra1011]

Hi @mrdoob l , I am using three.js lib to load a 3d model of watch and then customize it by adding text to it . Now I want to add text on watch's back dial , I have used same above example , creating a canvas -> writing to canvas --> appending image to a texture --> appending the texture to back dial material's map. Although Text is rendered fine in canvas but not showing up watch's back dial.
repo :
repo : https://github.com/bhupendra1011/watch-3d-engrave
Live example : https://bhupendra1011.github.io/watch-3d-engrave/

All js code in main1.js .
Kindly let me know what i m missing here

Thanks

[Mugen87]

@bhupendra1011 Please use the forum or stackoverflow for help requests.

[bhupendra1011]

@Mugen87 thanks for directing me to forum 👍