I have a requirement to showcase various texts at different coordinates using three js. My goal is to present the text in a similar layout as shown in the provided image file below.
I am seeking a function that can accurately position text at varying locations, akin to the reference image.
https://i.sstatic.net/rPIAu.png
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
});
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 );
}