three.js 2D Text精灵标签 [英] three.js 2D Text sprite labels

问题描述

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

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

我的问题是什么
我找到了这个教程（这是我想要实现的效果！ http：// stemkoski .github.io / Three.js / Sprite-Text-Labels.html ），但它的旧版本的three.js使用像 var spriteAlignment = THREE.SpriteAlignment.topLeft; 。我发现了这个解决方法（ THREE.SpriteAlignment显示为未定义）但它不是清楚我可以如何使用新方法来满足我的需求。

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

解决方案

文本精灵很好，但如果你使用更多的是它可以减慢一切，因为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 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 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精灵标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！