canvas - 使用 ThreeJS 更新 `THREE.Sprite` 内的文本

Question

我使用 context.fill 方法创建了一个包含文本的 sprite 对象。但是，我想更改文本，以便它显示我在 3D Canvas 中计算的距离。我经常进行计算，所以我不简单地创建具有新值的新 Sprite 。

例如:

Sprite 始终显示，当我在 3D 世界中计算距离时， Sprite 中的文本会更改为距离值。

我正在使用:ThreeJS r66 和以下 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

我将从您的问题中提取您的解决方案并将其发布在这里以在将来帮助其他人。

这是一个图像，你可以用新的整体油漆填充它并像下面这样重写文本:

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 :)

唯一的问题是你不能让 sprite 具有不透明/透明背景，因为你正在“绘制”它。如果您将 fillStyle 的 alpha 值设置为 0.5，则旧文本将通过新文本可见。