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;

roundRect(ctx,
          borderThickness * 0.5,            // x
          borderThickness * 0.5,            // y
          this.textWidth + borderThickness, // width
          fontsize * 1.4 + borderThickness, // height
          6                                 // corner radius
);

//...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。

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