精灵缩放导致不正确的定位和旋转 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 );

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

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

问题是如果我缩放图像，它的位置和旋转就会完全混乱。精灵的宽度似乎比文本的宽度大得多。见 fiddle:

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

理论上带"one"的文字应该在立方体顶点附近，旋转时不应该在立方体内外移动。

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

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

Sprite scaling causes incorrect positioning and rotation in three.js

javascript

debugging

3d

sprite

three.js