three.js 2D Text精灵标签

问题描述

我是three.js的新手，并且有一些问题属于2D文本：

我想要的是什么：
I想为例如一些标签。 x，y和z轴。标签应始终朝向相机。也许以后他们只应该被展示，如果他们徘徊，但这是另一个话题。

我的问题是什么
我找到了这个教程（这是我想要实现的效果！），但它的旧版本的three.js使用像 var spriteAlignment = THREE.SpriteAlignment.topLeft; 。我发现了这个解决方法（）但它不是清楚我可以如何使用新方法来满足我的需求。

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

解决方案

文本精灵很好，但如果你使用更多的是它可以减慢一切，因为GPU。

有一种更好的方式，将Canvas创建为Canvas，这里是一个函数，我也用它：

  function makeTextSprite（message，parameters）
 {
 if（parameters == =未定义）parameters = {}; 
 var fontface = parameters.hasOwnProperty（fontface）？参数[fontface]：Arial; 
 var fontsize = parameters.hasOwnProperty（fontsize）？参数[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）; 
返回精灵; 
} 
  

I'm new to three.js and have some issues belonging 2D Text:

What I want:I want some Labels for eg. the x,y and z-axis. The labels should always look to the camera. Maybe later they should only be shown, if their hovered but that's another topic.

What are my issuesI 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 forMaybe you could help me name that thing I was searching for or come up with a short approach.

解决方案

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

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 Text精灵标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！