three.js 2D 文本精灵标签

2022-01-17 00:00:00 javascript html html5-canvas three.js

我是 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)，但它适用于旧版本的three.js，使用方法如 var spriteAlignment = THREE.SpriteAlignment.topLeft;.我发现了这个解决方法(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;  
    }

相关文章