Three.js - 使用 Sprite 精灵创建文字标签

Sprite精灵在计算机图形学中指包含在场景中的二维动画和图像，即sprite是一个永远朝向相机的平面，类似广告牌，没有z轴的概念，并且sprite不接受阴影。
示例：https://ithanmang.gitee.io/threejs/home/201808/20180815/03-sprite-text.html

示例创建一个三维坐标轴，使用canvas绘制字体，并作为纹理加入到sprite的map属性中，从而创建出二维字体标签，用来显示信息，并且可以跟随坐标轴缩放和移动。

首先，通过canvas绘制出圆角矩形，并且矩形的大小随文字的多少而改变，关于canvas的知识可以去http://www.runoob.com/html/html5-canvas.html 学习。

/* 绘制圆角矩形 */
    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();

    }

然后，绘制文字精灵，并返回创建出的sprite

/* 创建字体精灵 */
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 canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');

    /* 字体加粗 */
    context.font = "Bold " + 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