Are you interested in fitting a 3D text inside a 3D object? Let me guide you through the process starting with the fundamental theory,
Picture a flag shaped like sin(2*pi) and your camera positioned along the y-axis (in Three.js coordinates). Now, imagine adding text that perfectly aligns with the sin(2*pi) function. Sound challenging?
https://i.sstatic.net/FoqoV.png
Here's the key concept - try obtaining tangent lines from the sin(x) function to cut the text into segments that match the tangents...
For instance, the text "Montiel Software" will be split into ["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 the flag (choosing tangents) and then add the flag to the 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);
This is the unique approach I have devised using Three.js. If you are simply looking to create a 3D object, I recommend utilizing 3D builder to explore different options and then import the object into Three.js.