Add curved text over object

Questions
1

Please help me to add text over the cylinder object. I have added two scenes, one with text & other with cylinder. I set the position of text over cylinder, but it is not actually adding text over cylinder and distort when we are rotating 3D model. Below is my code:

//adding text
var loader = new THREE.FontLoader();
loader.load(‘https://raw.githubusercontent.com/mrdoob/three.js/master/examples/fonts/helvetiker_bold.typeface.json’, function (font) {

        //add text
        var shape = new THREE.TextGeometry('Front coin text', {
            font: font,
            size: 5,
            height: 1,
            curveSegments: 1,
            bevelEnabled: true,
            bevelThickness: 0.5,
            bevelSize: 0.25,
            bevelOffset: 0,
            bevelSegments: 5
        });
        shape.center();


        var wrapper = new THREE.MeshPhongMaterial({
            color: 0x00ff00,
        });
        var words = new THREE.Mesh(shape, wrapper);
        words.position.x = -1;
        words.position.z = 0;
        words.position.y = 9;
        scene.add(words);
        // text finished

        // add coin
        var geometry = new THREE.CylinderGeometry(1, 1,0.05, 32, 1, false); //CylinderGeometry(radiusTop : Float, radiusBottom : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float)
        //var geometry = new THREE.CylinderGeometry(3, 3, 0.09, 32, 1, false);
        var aFaces = geometry.faces.length;
        for (var i = 0; i < aFaces; i++) {
            if (i < 64) {
                geometry.faces[i].materialIndex = 0;
            } else if (i > 63 && i < 96) {
                geometry.faces[i].materialIndex = 1;
            } else {
                geometry.faces[i].materialIndex = 2;
            }
        }
        var materialTop = new THREE.MeshPhongMaterial({ color: 0x0000FF });

        var materialSide = new THREE.MeshPhongMaterial({ color: 0xffffff })
        //var materialSide = new THREE.MeshPhongMaterial({ map: words, side: THREE.DoubleSide })

        var materialBottom = new THREE.MeshPhongMaterial({ color: 0x0000FF });
        var materialsArray = [];
        materialsArray.push(materialTop); //materialindex = 0
        materialsArray.push(materialSide); // materialindex = 1
        materialsArray.push(materialBottom); // materialindex = 2

        var material = new THREE.MeshFaceMaterial(materialsArray);
        var cone = new THREE.Mesh(geometry, material);
        cone.position.normalize();
        cone.position.multiplyScalar(Math.random() * 10 + 450);
        cone.scale.multiplyScalar(30);
        scene.add(cone);
    });

Thanks

2

See modifier curve example

3

@anidivr Thanks for sharing link. I tired above link but it is not solving my purpose. Basically, I have created coin using cylinder, texture and materials. As stl file doesn’t support texture and materials as a result images that I have added over coin not showing in 3D print so I want to write text over cylinder as shown in below screenshot:
image

The above link is working fine with LineLoop but when I am using cylinder text went hide with cylinder. Also I have noticed that curve is not shown in text when I am exporting mesh as STL.

Actual text in browser is:

image
image1161×508 12.5 KB

and when exporting above mesh as stl file then its looks as shown below:

image
image1366×768 105 KB

Please suggest.