三.JS MakeTextSprite 属性答案

【问题标题】：THREE.JS MakeTextSprite properties三.JS MakeTextSprite 属性
【发布时间】：2015-06-09 14:49:28
【问题描述】：

我在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 的适当性。例如，当我在 Width 处设置 1000 时，SpriteMaterial 中的画布会缩小。所以我的 Sprite 的大小总是一样的。

而且，字体是“像素化”的，我尝试平滑字体时没有成功。

【问题讨论】：

标签： javascript canvas three.js

【解决方案1】：

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

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

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

要解决“像素化”，您需要缩小精灵，如下所示：

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

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

【讨论】：