Update text inside `THREE.Sprite` with ThreeJS

Question

I created a sprite object which contains text inside using the context.fill method. However, I'd like to change the text so that it displays a distance that I have calculated in the 3D canvas. I do the calculation pretty often so that's why I don't simply create new sprites with the new value inside.

For example:

The sprite is always shown and when I calculate a distance in the 3D world, the text inside the sprite changes to the distance value.

I am using: ThreeJS r66 and the following script from Stemkoski:

function makeTextSprite(message, parameters) {
    if (parameters === undefined) parameters = {};

    var fontface = parameters.hasOwnProperty("fontface") ?
        parameters["fontface"] : "Arial";

    var fontsize = parameters.hasOwnProperty("fontsize") ?
        parameters["fontsize"] : 18;

    var borderThickness = parameters.hasOwnProperty("borderThickness") ?
        parameters["borderThickness"] : 4;

    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 spriteAlignment = THREE.SpriteAlignment.topLeft;

    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    context.font = "Bold " + fontsize + "px " + fontface;

    // get size data (height depends only on font size)
    var metrics = context.measureText(message);
    var textWidth = metrics.width;

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

    context.lineWidth = borderThickness;
    roundRect(context, borderThickness / 2, borderThickness / 2, textWidth + borderThickness, fontsize * 1.4 + borderThickness, 6);
    // 1.4 is extra height factor for text below baseline: g,j,p,q.

    // text color
    context.fillStyle = "rgba(0, 0, 0, 1.0)";

    context.fillText(message, borderThickness, fontsize + borderThickness);

    // canvas contents will be used for a texture
    var texture = new THREE.Texture(canvas)
    texture.needsUpdate = true;

    var spriteMaterial = new THREE.SpriteMaterial(
        { map: texture, useScreenCoordinates: false });
    var sprite = new THREE.Sprite(spriteMaterial);
    sprite.scale.set(1000, 500, 10);
    return sprite;
}

// function for drawing rounded rectangles
function roundRect(ctx, x, y, w, h, r) {
    ctx.beginPath();
    ctx.moveTo(x + r, y);
    ctx.lineTo(x + w - r, y);
    ctx.quadraticCurveTo(x + w, y, x + w, y + r);
    ctx.lineTo(x + w, y + h - r);
    ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
    ctx.lineTo(x + r, y + h);
    ctx.quadraticCurveTo(x, y + h, x, y + h - r);
    ctx.lineTo(x, y + r);
    ctx.quadraticCurveTo(x, y, x + r, y);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
}

Answer 1

I am pulling your solution out of your question and posting it here to assist others in the future.

It is a image that you can just fill it up with new overall paint and rewrite the text like the following:

message = "It works!";

context.fillStyle = "rgba(0, 0, 0, 1.0)";   // CLEAR WITH COLOR BLACK (new BG color)
context.fill();                             // FILL THE CONTEXT
context.fillStyle = "rgba(255, 0, 0, 1.0)"; // RED COLOR FOR TEXT
context.fillText(message, context.lineWidth, 24 + context.lineWidth); // WRITE TEXT

spritey.material.map.needsUpdate = true;    // AND UPDATE THE IMAGE..

Render(); // NORMAL RENDER AFTER :)

The only problem with this is that you can't have the sprite with opacity/transparent background since you're "painting" it over. if you set to have alpha value = 0.5 on fillStyle, the old text will be visible through the new one.