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

【问题标题】：Sprite scaling causes incorrect positioning and rotation in three.js精灵缩放导致三个.js 中不正确的定位和旋转
【发布时间】：2016-05-25 00:38:46
【问题描述】：

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

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

three.js 版本 62 中的行为是正确的：

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

在我看来，三个.js github 页面的错误和I reported it，但它已关闭。

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

【问题讨论】：

您是否考虑过使用位于画布上的简单 HTML
来创建文本精灵？
不，我需要一个 2d 图像，但它位于特定的 3d 点，而不仅仅是作为 HUD 在“屏幕”上。见小提琴。
我在发表评论之前看过小提琴。您可以使用动态定位的 HTML
作为文本精灵：stackoverflow.com/questions/34940113/… 很高兴您得到了问题的答案。