I'm attempting to generate a sprite with text without utilizing TextGeometry for improved performance.
var fontsize = 18;
var borderThickness = 4;
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
context.font = "Bold " + fontsize + "px Arial";
context.fillText( message, borderThickness, fontsize + borderThickness);
var texture = new THREE.Texture(canvas)
texture.needsUpdate = true;
var spriteMaterial = new THREE.SpriteMaterial({ map: texture});
var sprite = new THREE.Sprite( spriteMaterial );
However, the resulting width is consistently half of what I anticipate. Despite altering the size of the canvas, the outcome is rather peculiar. Therefore, I decided to scale it.
sprite.scale.set(100,50,1.0);
The issue arises when I scale the image, leading to misalignment in position and rotation. It appears that the sprite's width exceeds the text's width. Please refer to the following fiddle:
https://jsfiddle.net/ko3co15f/1/
Theoretically, the text with "one" should be adjacent to the cube vertex, and any rotation should not cause it to shift inside or outside the cube.
This behavior was correct in three.js revision 62:
https://jsfiddle.net/qqefadu8/4/
Personally, I believe this to be a bug and I consequently reported it on the three.js GitHub page, though it was eventually closed.
The code has been modified from