javascript - 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

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.