javascript 三.js 2D 文本精灵标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23514274/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
three.js 2D Text sprite labels
提问by schlenger
I'm new to three.js and have some issues belonging 2D Text:
我是 Three.js 的新手，有一些属于 2D 文本的问题：
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.
我想要什么：我想要一些标签，例如。x、y 和 z 轴。标签应始终注视着相机。也许以后他们应该只显示，如果他们悬停，但那是另一个话题。
What are my issuesI 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.
我发现这个教程有什么问题（这正是我想要达到的效果 | http://stemkoski.github.io/Three.js/Sprite-Text-Labels.html），但它是针对旧版本的三.js 使用像var spriteAlignment = THREE.SpriteAlignment.topLeft;. 我找到了这个解决方法（THREE.SpriteAlignment 显示为 undefined），但我不清楚如何使用新方法来满足我的需求。
What I'm looking forMaybe you could help me name that thing I was searching for or come up with a short approach.
我在寻找什么也许你可以帮我命名我正在寻找的那个东西，或者想出一个简短的方法。
采纳答案by mcode
Text Sprites are nice, but if you use more then thousand of it it can slow down everything because of the GPU.
文本精灵很好，但如果你使用超过一千个它会因为 GPU 而减慢一切。
There is a "better" way, create the Sprite as Canvas, here is a function that I use too for it:
有一种“更好”的方法，将 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;
}
回答by Endel
I've published a module on NPM that does that for you: https://github.com/gamestdio/three-text2d
我在 NPM 上发布了一个模块，可以为您执行此操作：https: //github.com/gamestdio/three-text2d
It allows you to have an Object3Dwith rendered text without dealing with canvas manually.
它允许您Object3D使用渲染文本而无需手动处理画布。
Example:
例子：
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)
回答by Andrej
You can use my SpriteText object. See example of using sprites_text.
您可以使用我的 SpriteText 对象。请参阅使用sprites_text 的示例。
Example of code:
代码示例：
var spriteText = new THREE.SpriteText({ text: 'Hello world!' });
scene.add( spriteText );
来源。
