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

问题描述

我是 Three.js 的新手，有一些属于 2D 文本的问题:

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

我想要的:我想要一些标签，例如.x、y 和 z 轴.标签应始终注视着相机.也许以后他们应该只显示，如果他们悬停但那是另一个话题.

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.

我的问题是什么我找到了这个教程(这正是我想要达到的效果 | http://stemkoski.github.io/Three.js/Sprite-Text-Labels.html)，但它适用于使用诸如 var spriteAlignment = THREE.SpriteAlignment.topLeft; 之类的方法的three.js 的旧版本..我找到了这个解决方法(THREE.SpriteAlignment 显示为未定义)但它不是让我清楚如何使用新方法来满足我的需求.

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

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