javascript - Sprite 缩放导致 Three.js 中的定位和旋转不正确

Question

我正在尝试创建一个带有文本的 Sprite 。出于性能原因，我没有使用 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 );

由于某种原因，最终的宽度是我预期的一半。我尝试更改用于创建 Sprite 的 Canvas 的大小，但结果很奇怪。所以我缩放了它。

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

问题是，如果我缩放图像，它的位置和旋转就会完全困惑。看起来 Sprite 的宽度比文本的宽度大得多。看 fiddle :

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

理论上，带有“一”的文本应该位于立方体顶点附近，并且当它旋转时，它不应该在立方体内部和外部移动。

该行为在 Three.js 修订版 62 中是正确的:

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

在我看来这是一个错误并且 I reported it到 Three.js github 页面，但已关闭。

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

Answer 1

已解决。我必须在 Canvas 创建后立即更改 Canvas 大小:

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 。我还有一个问题，我会在另一个问题中发布。