I am trying to scale a sprite and fill the entire screen, to have text on the top and bottom of the screen, but when I do so, it scales the text also. So how do I put a big line of text at top of screen??
my code:
var ui_canvas = document.createElement('canvas');
var size = 1028;
canvas.width = size;
canvas.height = size;
var context = ui_canvas.getContext('2d');
context.fillStyle = '#ff0000';
context.textAlign = 'center';
context.font = '48px Arial';
context.fillText("some text", size / 12, size / 12);
context.strokeStyle = '#ff0000';
context.lineWidth = 1;
context.beginPath();
context.moveTo(0,0);
context.lineTo(size, 0);
context.lineTo(size, size);
context.lineTo(0, size);
context.lineTo(0, 0);
context.stroke();
var amap = new THREE.Texture(ui_canvas);
amap.needsUpdate = true;
amap.generateMipmaps = false;
var mat = new THREE.SpriteMaterial({
map: amap,
depthTest: false,//to keep always in front
depthWrite: false,//to keep always in front
transparent: false,
sizeAttenuation: false,
useScreenCoordinates: false,
color: 0xffffff
});
var sp = new THREE.Sprite(mat);
sp.scale.set( 1,1,1 ); // CHANGED
//camera.add(sp);
//sp.quaternion.copy(camera.quaternion);
sp.position.set(-10, -6, 0);
scene.add(sp);
sp.position.set(-10, -6, 0); does nothing, since sizeAttenuation = false, but even moving the sprite closer when sizeAttenuation = true, the text just gets bigger. I want more area to write text.
sp.scale.set( 1,1,1 ); also grows the text.
and making the sprite bigger and putting smaller font ex: context.font = ’12px Arial’;
makes poor resolution and unreadable font.
how to solve this? how to have high res, crisp font and text all over the entire screen?
thank you!