使用three.js在sprite中显示表

Question

我正在为three.js中的项目创建一些工具提示。这是我用来创建工具提示的代码。

var defaultWidthForText = 450;
var canvasMinSize = 300;
var textMultiplier = 1.2;


function getMaxWidth(context, texts)
{
    let maxWidth = 0;
    for(let i in texts)
        maxWidth = Math.max(maxWidth, context.measureText(texts[i]).width);
    return maxWidth;
}

function makeTextSprite(message, parameters, transparent, opaque) {
    message = " " + message + " ";
    if (parameters === undefined) parameters = {};

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

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

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

    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 };

    /// setting opaque
    if(opaque === undefined) backgroundColor.a = 0.3;
    else backgroundColor.a = opaque;

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

    var texts = message.split('\n');
    var totalLine = texts.length;
    var textWidth = getMaxWidth(context, texts);

    // setting canvas size
    var size = Math.max(canvasMinSize, textWidth + 2 * borderThickness);
    canvas.width = size;
    canvas.height = size;
    context.font = "Bold " + fontsize + "px " + fontface;

    // 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 + ")";
    // border width
    context.lineWidth = borderThickness;

    let totalTextHeight = fontsize * textMultiplier * totalLine;
    roundRect(context, (size/2 - textWidth / 2) - borderThickness/2, size / 2 - fontsize/2 - totalTextHeight/2, textWidth + borderThickness, totalTextHeight + fontsize/2 , 6);


    // text color
    context.fillStyle = "rgba(" + textColor.r + "," + textColor.g + ","
        + textColor.b + "," + textColor.a + ")";

    let startY = size / 2  - totalTextHeight/2 + fontsize/2 ;
    for(var i = 0; i < totalLine; i++) {
        let curWidth = context.measureText(texts[i]).width;
        context.fillText(texts[i], size/2 - curWidth/2, startY + fontsize * i * textMultiplier);
    }

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

    var spriteMaterial = new THREE.SpriteMaterial(
        { map: texture, transparent: true, depthTest: false, depthWrite: false });


    if (transparent !== undefined && transparent === true) {
        spriteMaterial.transparent = true;
        spriteMaterial.depthWrite = false;
        spriteMaterial.depthTest = false;
    }

    var sprite = new THREE.Sprite(spriteMaterial);
    return sprite;
}



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();
}

这会产生类似this图片的工具提示。

现在我想制作一个工具提示，我可以在其中显示一些表格，如this。

如果有人可以在stackoverflow上找到正确答案或提供解决方案。

感谢。