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.

Solution 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/docs/index.html?q=textgeo#api/en/geometries/TextGeometry

3. Using a CSS3D solution.

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

---

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

Solution 2

if you are searching for " How to fit a 3D text in a 3D object" I will explain how to do this, lets begin with the theory,

Imagine having a flag with the form of the flag given sin(2*pi) if your camera is watching from y axis (three js axes) then you gonna add a text that exactly fits the function sin(2*pi), right?

so,

as you can see the idea of this is trying to get some tangets of sin(x) function, the secret of this is to cut the text in the number of tangents that will fit your text...

for the text, "Montiel Software" it will be now ["Mon","tiel","Soft","Ware"]

Flag:

function flag(u,v,vector)
{
var x = 10*u;
var y = 10*v;
var z = Math.sin(2*Math.PI*u) ;
vector.set(x,y,z);}

Create the Geometry:

var geometry_sin = new THREE.ParametricGeometry(flag, 100, 100);
var material_sin = new THREE.MeshPhongMaterial({map:groundTexture,side:THREE.DoubleSide, color:0x000000} );
var flag = new THREE.Mesh( geometry_sin, material_sin );

Now add the text to flag (choose your tangents here) then the flag to scene:

var loader = new THREE.FontLoader();
loader.load('js/examples/fonts/helvetiker_regular.typeface.json',function(font){
var geometry = new THREE.TextGeometry( 'Mon', {
        font: font,
        size: 1,
        height: 0.5,
        curveSegments: 12,
        bevelEnabled: false,
        bevelThickness: 0.1,
        bevelSize: 0.1,
        bevelSegments: 0.1
    } );
    var txt_mat = new THREE.MeshPhongMaterial({color:0xffffff});
    var txt_mesh = new THREE.Mesh(geometry, txt_mat);
    txt_mesh.position.z = 0.2;
    txt_mesh.position.y = 5;
    txt_mesh.rotation.y = -Math.PI/8;
    flag.add(txt_mesh);
    var geometry = new THREE.TextGeometry( 'tiel', {
        font: font,
        size: 1,
        height: 0.5,
        curveSegments: 12,
        bevelEnabled: false,
        bevelThickness: 0.1,
        bevelSize: 0.1,
        bevelSegments: 0.1
    } );
    var txt_mat = new THREE.MeshPhongMaterial({color:0xffffff});
    var txt_mesh = new THREE.Mesh(geometry, txt_mat);
    txt_mesh.position.z = 1.2;
    txt_mesh.position.x = 2.5;
    txt_mesh.position.y = 5;
    txt_mesh.rotation.y = Math.PI/12;
    flag.add(txt_mesh);
    var geometry = new THREE.TextGeometry( '$oft', {
        font: font,
        size: 1,
        height: 0.5,
        curveSegments: 12,
        bevelEnabled: false,
        bevelThickness: 0.1,
        bevelSize: 0.1,
        bevelSegments: 0.1
    } );
    var txt_mat = new THREE.MeshPhongMaterial({color:0xffffff});
    var txt_mesh = new THREE.Mesh(geometry, txt_mat);
    txt_mesh.position.z = 0.28;
    txt_mesh.position.x = 4.5;
    txt_mesh.position.y = 5;
    txt_mesh.rotation.y = Math.PI/7;
    flag.add(txt_mesh);
    var geometry = new THREE.TextGeometry( 'Ware', {
        font: font,
        size: 1,
        height: 0.5,
        curveSegments: 12,
        bevelEnabled: false,
        bevelThickness: 0.1,
        bevelSize: 0.1,
        bevelSegments: 0.1
    } );
    var txt_mat = new THREE.MeshPhongMaterial({color:0xffffff});
    var txt_mesh = new THREE.Mesh(geometry, txt_mat);
    txt_mesh.position.z = -1;
    txt_mesh.position.x = 7;
    txt_mesh.position.y = 5;
    txt_mesh.rotation.y = -Math.PI/8;
    flag.add(txt_mesh);

} );
scene.add(flag);

that's the only way I can imagine to do this in three JS, if you are just searching to make a 3D objet, I suggest you to install 3D builder and try options there then load the object to THREE js.

Comments

[Thirupaa]

I used BendModifier too. I cannot find solution to fit shirt model

[Derte Trdelnik]

you can create a texture with the text (manually or render a 2d canvas to texture) or create models that resemble the text threejs.org/examples/#webgl_geometry_text, there is no native support for text in webGL, if you want to keep using 2D canvas renderer you can transform the text part with ctx.transform to somehow simulate the wanted deformation...

[gman]

See threejs.org/examples/webgl_decals.html. Change the spat texture to your text (use a 2d canvas, put some text in it, use it as a source for a texture)

[Thirupaa]

Thanks for your response.Is there any option to use text editor inside shirt model? Text editor like move,drag and clone delete option

[Wilt]

@Thirupaa I guess all that should be possible, but it will probably mean a lot of custom code. There is nothing like that out-of-the-box for three.js. But take a look at the THREE.TextGeometry page there you see a UI with some options. Maybe you can use this as a starting point...

[Ramil Kudashev]

For good results i suggest rendering text to texture and then project it on your model using decals (look at THREE.DecalGeometry).

[Wilt]

@Thirupaa I agree with mlkn that textures will give you most likely the best result. Check here for reference of THREE.DecalGeometry

[Thirupaa]

Thank you Wilt and mlkn. THREE.DecalGeometry working fine for me.