THREE.JS MakeTextSprite 属性

Question

我在https://stemkoski.github.io/Three.js/Sprite-Text-Labels.html

中使用函数"MakeTextSprite"

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

我用这个创建了我的精灵：

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

我想要适当扩展宽度。例如，当我将 Width 设置为 1000 时，SpriteMaterial 中的 canvas 会减少。所以我的精灵的大小总是一样的。

另外，字体是"pixelized"，我尝试平滑字体的时候没有成功

Answer 1

通过添加到 textWidth 变量来控制精灵的宽度。

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

它将在绘制精灵的roundRect(...)函数中用作宽度。

为了解决"pixelation"你需要缩小精灵，像这样：

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

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

THREE.JS MakeTextSprite 属性

THREE.JS MakeTextSprite properties

javascript

canvas

three.js