我是 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 显示为未定义),但我不清楚如何使用新方法来满足我的需求。
我在寻找什么 也许你可以帮我命名我正在寻找的东西,或者想出一个简短的方法。
文本精灵很好,但如果您使用超过数千个它,它可能会因为 GPU 的原因而减慢一切。
有一种“更好”的方法,将 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;
}
我在 NPM 上发布了一个模块,可以为您做到这一点:https://github.com/gamestdio/ Three-text2d
它允许您拥有带有渲染文本的
Object3D
,而无需手动处理画布。
示例:
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 的示例。
代码示例:
var spriteText = new THREE.SpriteText({ text: 'Hello world!' });
scene.add( spriteText );
来源。