Question

我正在尝试使用文本创建一个精灵。出于性能原因，我没有使用TextGeometry。

var fontsize = 18;
var borderThickness = 4;
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
context.font = "Bold " + fontsize + "px Arial";
context.fillText( message, borderThickness, fontsize + borderThickness);
var texture = new THREE.Texture(canvas) 
texture.needsUpdate = true;
var spriteMaterial = new THREE.SpriteMaterial({ map: texture});
var sprite = new THREE.Sprite( spriteMaterial );

由于某种原因，产生的宽度是我期望的一半。我试图改变用于创建精灵的canvas的大小，结果很奇怪。所以我缩放了它。

sprite.scale.set(100,50,1.0);

问题在于，如果我缩放图像，它的位置和旋转完全搞砸了。似乎精灵的宽度远大于文本的宽度。看小提琴：

https://jsfiddle.net/ko3co15f/1/

理论上，带有“one”的文本应该靠近立方体顶点，当它旋转时，它不应该在立方体内外移动。

在three.js修订版62中的行为是正确的：

https://jsfiddle.net/qqefadu8/4/

在我看来这是一个bug和I reported it到three.js github页面，但它已经关闭了。

代码改编自https://stemkoski.github.io/Three.js/Sprite-Text-Labels.html

Answer 1

解决。我必须在创建画布后更改画布大小：

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

var size = 56;
canvas.height = size;
canvas.width = size;

https://jsfiddle.net/03h4fyka/1/

Credits to WestLangley。我有另一个问题，我会在另一个问题上发布。

精灵缩放导致三个.js中的定位和旋转不正确

1 个答案: