How to add text into along the object using three.js

Question

I have added text into my object (a shirt model) using a text geometry. Here is my code:

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.font = 'italic 18px Arial';
ctx.textAlign = 'center';
ctx. textBaseline = 'middle';
ctx.fillStyle = 'red'; 
ctx.fillText('Your Text', 150, 50);

My output looks like this:

The text does not fit into the shirt model. If I rotate the shirt model means text showing irrelevant view. I want to fit the text into the shirt model like this:

How can I fit my dynamic text into the shirt model using three.js.

Answer 1

Simply drawing the text to your 2D canvas will most likely never give you a satisfactory result. You have three possibilities to tackle this issue.

1. Using textures loaded with a THREE.TextureLoader.

• several examples here: http://threejs.org/examples
• tutorial: http://www.johannes-raida.de/tutorials/three.js/tutorial06/tutorial06.htm

2. Using THREE.TextGeometry:

• an example: https://threejs.org/examples/#webgl_geometry_text

3. Using a CSS3D solution.

• an example: https://threejs.org/docs/index.html#examples/en/renderers/CSS3DRenderer

---

Check also the UI example on the THREE.TextGeometry documentation page: