关于javascript：three.js 2D文字精灵标签


three.js 2D Text sprite labels

我是Three.js的新手，在2D文字方面存在一些问题：

我想要的是：
我想要一些标签，例如。 x，y和z轴。 标签应始终朝相机看。 也许稍后，如果它们悬停了，就应该只显示它们，但这是另一个主题。

我有什么问题
我找到了本教程(这是我想要达到的效果| http://stemkoski.github.io/Three.js/Sprite-Text-Labels.html)，但是它是针对使用方法的旧版本的Three.js。 如var spriteAlignment = THREE.SpriteAlignment.topLeft;。 我发现了这种解决方法(THREE.SpriteAlignment显示为未定义)，但对我来说不清楚如何使用新方法满足自己的需求。

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

相关讨论

Text Sprites很不错，但是如果使用的数量超过数千，则由于GPU的原因，它可能会减慢一切。

有一种"更好"的方法，将Sprite创建为Canvas，这是我也使用的功能：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    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;  
    }
相关讨论

我已经在NPM上发布了一个为您做到的模块：https://github.com/gamestdio/three-text2d

它允许您使用带有呈现文本的Object3D，而无需手动处理画布。

例：

1
2
3
4
var Text2D = require('three-text2d').Text2D

var text = new Text2D("Hello world!", { align: textAlign.right, font: '30px Arial', fillStyle: '#000000', antialias: true })
scene.add(text)
相关讨论

您可以使用我的SpriteText对象。 请参见使用sprites_text的示例。

代码示例：

1
2
var spriteText = new THREE.SpriteText({ text: 'Hello world!' });
scene.add( spriteText );

资源。