Question

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

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

我的问题是什么 我找到了这个教程（这是我想要实现的效果| http://stemkoski.github.io/Three.js/Sprite-Text-Labels.html），但它是使用var spriteAlignment = THREE.SpriteAlignment.topLeft;等方法的旧版本的three.js。我找到了这个解决方法（THREE.SpriteAlignment showing up as undefined），但我不清楚如何根据我的需要使用新方法。

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

Answer 1

Text Sprites很不错，但是如果你使用的数量超过千万，那么由于GPU的原因，它可以减慢一切。

有一个更好的＆＃34;方式，创建Sprite作为Canvas，这是我也使用的函数：

    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;  
    }

Answer 2

我已经发布了一个关于NPM的模块，可以帮助您：https://github.com/gamestdio/three-text2d

它允许您使用渲染文本class MyView(TemplateView): def post(self, request, *args, **kwargs): form = MyForm(user=request.user, data=request.POST) if form.is_valid(): form.save() # password updated return redirect(<somehwere>) # the password change has failed form validation return self.render_to_response({})而无需手动处理画布。

示例：

Object3D

Answer 3

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

代码示例：

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

Source。

three.js 2D文本精灵标签

3 个答案: