I am currently working with Three JS to develop a 3D graph and I am facing an issue with displaying units of the graph as THREE.SPRITE. To create a SPRITE, I first generate a canvas element and add text to it. Then I proceed to create a THREE.Texture using the previously created canvas element. After that, I create a THREE.SpriteMaterial with the texture as a map and finally create a THREE.SPRITE using this sprite material, adding it to the scene. However, when using a THREE.WebGLRenderer, the text appears very small, whereas when using a THREE.CanvasRenderer, the text appears very large.
Below is the code snippet I utilized to create the Sprite.
var canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
metrics = null,
textHeight = 100,
textWidth = 0,
actualFontSize = 20;
context.font = "normal " + textHeight + "px Arial";
metrics = context.measureText("Sample Text");
var textWidth = metrics.width;
canvas.width = textWidth;
canvas.height = textHeight;
context.font = "normal " + textHeight + "px Arial";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillStyle = "#ff0000";
context.fillText("Sample Text", textWidth / 2, textHeight / 2);
var texture = new THREE.Texture(canvas);
texture.needsUpdate = true;
var material = new THREE.SpriteMaterial({ map: texture, useScreenCoordinates: false, alignment: THREE.SpriteAlignment.center });
material.transparent = true;
var textObject = new THREE.Object3D();
var sprite = new THREE.Sprite(material);
textObject.textHeight = actualFontSize;
textObject.textWidth = (textWidth / textHeight) * textObject.textHeight;
textObject.add(sprite);
scene.add(textObject);
Can you please advise if this behavior is default or if there is an issue in my implementation? I am seeking a solution that will ensure consistent text size in both Canvas and WebGL renderers.