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

i have added text object (a shirt model) using text geometry. here 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 this:

the text not fit shirt model. if rotate shirt model means text showing irrelevant view. want fit text shirt model this:

how can fit dynamic text shirt model using three.js.

simply drawing text 2d canvas never give satisfactory result. have 3 possibilities tackle issue.

1) using textures loaded 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: http://threejs.org/examples/#webgl_geometry_text

3) using css3d solution.

• a nice blog post on topic: http://learningthreejs.com/blog/2013/04/30/closing-the-gap-between-html-and-webgl/

---

check ui example on three.textgeometry documentation page: