THREE.JS MakeTextSprite properties

Question

I use the function "MakeTextSprite" in https://stemkoski.github.io/Three.js/Sprite-Text-Labels.html

function makeTextSprite(message, parameters) {
        if (parameters === undefined) parameters = {};
        var fontface = parameters.hasOwnProperty("fontface") ? parameters["fontface"] : "Helvetica";
        var fontsize = parameters.hasOwnProperty("fontsize") ? parameters["fontsize"] : 18;
        var borderThickness = parameters.hasOwnProperty("borderThickness") ? parameters["borderThickness"] : 0;
        var borderColor = parameters.hasOwnProperty("borderColor") ? parameters["borderColor"] : {
            r: 0,
            g: 0,
            b: 0,
            a: 1.0
        };
        var backgroundColor = parameters.hasOwnProperty("backgroundColor") ? parameters["backgroundColor"] : {
            r: 255,
            g: 255,
            b: 255,
            a: 1.0
        };
        var textColor = parameters.hasOwnProperty("textColor") ? parameters["textColor"] : {
            r: 0,
            g: 0,
            b: 0,
            a: 1.0
        };

        var canvas = document.createElement('canvas');
        var WIDTH = 400;
        var HEIGHT = 150;

        canvas.width = WIDTH;
        canvas.height = HEIGHT;
        var context = canvas.getContext("2d", {alpha:false});
        context.font = fontsize + "px " + fontface;

        var metrics = context.measureText(message);
        var textWidth = (metrics.width);

        context.fillStyle = "rgba(" + backgroundColor.r + "," + backgroundColor.g + "," + backgroundColor.b + "," + backgroundColor.a + ")";
        context.strokeStyle = "rgba(" + borderColor.r + "," + borderColor.g + "," + borderColor.b + "," + borderColor.a + ")";

        context.lineWidth = borderThickness;
        roundRect(context, borderThickness / 2, borderThickness / 2, (textWidth + borderThickness) * 1.1, fontsize * 1.4 + borderThickness, 8);

        context.fillStyle = "rgba(" + textColor.r + ", " + textColor.g + ", " + textColor.b + ", 1.0)";
        context.fillText(message, borderThickness, fontsize + borderThickness);
        var texture = new THREE.Texture(canvas, THREE.ClampToEdgeWrapping, THREE.ClampToEdgeWrapping, THREE.ClampToEdgeWrapping, THREE.NearestFilter, THREE.NearestFilter);
        texture.needsUpdate = true;
        var spriteMaterial = new THREE.SpriteMaterial({
            map: texture,
            useScreenCoordinates: false,
            transparent: false,
        });
        var sprite = new THREE.Sprite(spriteMaterial);
        sprite.scale.set(30, 15, 0);
        return sprite;
    }
    enter code here

I created my Sprite with this :

  Array[i] = makeTextSprite(Array[i].name, {
                fontsize: 100,
                borderColor: {
                    r: 255,
                    g: 255,
                    b: 255,
                    a: 1.0
                },
                backgroundColor: {
                    r: 255,
                    g: 255,
                    b: 255,
                    a: 1
                }
            });

I wanted extend Width propriety. When I set 1000 for exemple at Width, the canvas reduce in SpriteMaterial. So the size of my Sprite always the same.

Moreover, the font is "pixelized", I don't succeed when I try to smooth the font.

Answer 1

Manipulate the width of your sprite by adding to the textWidth variable.

var metrics = context.measureText(message);
var extend = 1000;
var textWidth = (metrics.width) + extend;

It will be used as width in the roundRect(...) function which draws the sprite.

To solve the "pixelation" you need to scale the sprite down, like so:

var width = spriteMaterial.map.image.width;
var height = spriteMaterial.map.image.height;

sprite.scale.set( width/10, height/10, 1 );