three.js 2D 文本精灵标签

What are my issues I found this tutorial (which is excatly the effect I want to achieve | http://stemkoski.github.io/Three.js/Sprite-Text-Labels.html), but it's for an old version of three.js using methods like var spriteAlignment = THREE.SpriteAlignment.topLeft;. I found this workaround (THREE.SpriteAlignment showing up as undefined) but it's not clear for me how I could use the new approach for my needs.

我在寻找什么也许你可以帮我命名我正在搜索的那个东西，或者想出一个简短的方法.

What I'm looking for Maybe you could help me name that thing I was searching for or come up with a short approach.

推荐答案

Text Sprites 很好，但是如果你使用超过数千个它可能会因为 GPU 而减慢一切.

Text Sprites are nice, but if you use more then thousand of it it can slow down everything because of the GPU.

有一种更好"的方法，将 Sprite 创建为 Canvas，这是我也使用的一个函数:

There is a "better" way, create the Sprite as Canvas, here is a function that I use too for it:

    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 textColor = parameters.hasOwnProperty("textColor") ?parameters["textColor"] : { r:0, g:0, b:0, 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 + "," + 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) 
        texture.needsUpdate = true;

        var spriteMaterial = new THREE.SpriteMaterial( { map: texture, useScreenCoordinates: false } );
        var sprite = new THREE.Sprite( spriteMaterial );
        sprite.scale.set(0.5 * fontsize, 0.25 * fontsize, 0.75 * fontsize);
        return sprite;  
    }

这篇关于three.js 2D 文本精灵标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！