Three.js - 为什么我的精灵画在除了它的位置以外的地方？

Question

我使用的是Three.js r69。

我正在绘制几个精灵，每个精灵都有一个画布纹理，以便我可以在其上绘制文字。我按照this question中的建议进行了一些简单的修改，以使其在r69中运行。当我设置精灵的位置时，它不会在它的位置绘制它。以下是发生的事情的屏幕截图：

我还会包含用于生成精灵的代码：

this.text = _text;
this.textColor = new THREE.Color();

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
//...set the font
//...measure the text width
//...get the aspect ratio of width to height of the text
//...set the background color
//...set the border color
var borderThickness = 2;
ctx.lineWidth = borderThickness;
//             x                      y                      width                             height                            corner radius
roundRect(ctx, borderThickness * 0.5, borderThickness * 0.5, this.textWidth + borderThickness, fontsize * 1.4 + borderThickness, 6);
//...set font color
ctx.fillText(this.text, borderThickness, fontsize + borderThickness);

var texture = new THREE.Texture(canvas);
texture.needsUpdate = true;

var spriteMaterial = new THREE.SpriteMaterial(
    {map: texture}
);
this.object = new THREE.Sprite(spriteMaterial);
this.object.scale.set(2, 2/this.aspect, 1.0);

当我生成画布和SpriteMaterial时，我做错了什么？或者是别的什么？我喜欢精灵围绕它的中心转动，而不是那些完全在画布外面的点。

Answer 1

看起来我没有明确设置画布的大小，因此默认为300 x 150。

我将画布大小设置为文本标签的大小，并将其正确定位。