javascript - Display texts at different-different coordinates using three.js

Question

I want to display different texts at different-different coordinates using three js. And I want to show the text like in the following image file at different-different location.

I want that function should display text at different-different location as like in linked image file

Javascript

var container, camera, scene, renderer, controls;
var text2;


init();
animate();

function init(){

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.01, 1000 );
    camera.position.z = 1 ;

    scene = new THREE.Scene();

    text2 = createLabel("Tower",30,90,30,10,50,"blue","white");
    text3 = createLabel("Hello",30,90,50,60,50,"black","white");
    text4 = createLabel("Tower",30,90,120,100,50,"red","white");

    console.log( text2 );

    scene.add( text2 );
    scene.add( text3 );
    scene.add( text4 );
    text2.lookAt( camera.position );

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setClearColor(0xffffff);
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.append( renderer.domElement );

}

function createLabel(text, x, y, canvasPosition_x,canvasPosition_y, size, color, backGroundColor, backgroundMargin) {

    var canvas = document.createElement("canvas");

    // set resolution

    canvas.width = 512;
    canvas.height = 512;

    var context = canvas.getContext("2d");
    context.font = size + "pt Arial";

    context.font = size + "pt Calibri";
    context.fillStyle = "white";

    canvas.position = "absolute";

    context.fillRect( 0, 0, canvas.width, canvas.height );
    context.fillStyle = color;
    context.fillText( text, x, y );
    context.position = "absolute";

    var texture = new THREE.CanvasTexture( canvas );

    var material = new THREE.MeshBasicMaterial({
            map: texture,
    // color: 0xff0000 // useful for debugging. in this way you see, how much are of the plane is used for the text
});

    var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry(), material);

     mesh.position.x = canvasPosition_x;
     mesh.position.y = canvasPosition_y;

    return mesh;

}

function animate()  {

    requestAnimationFrame( animate );
    renderer.render( scene, camera );


}

Here is link of fiddle

Answer 1

You can use the position-attribute of the mesh to change the location. So for instance mesh.position.x = 0.5;.