Three.js - 为什么我的 Sprite 在其位置以外的地方绘制？

Question

我正在使用 Three.js r69 .

我正在绘制几个 Sprite ，每个 Sprite 都有一个 Canvas 纹理，以便我可以在上面绘制文本。我正在遵循 this question 中找到的建议，进行一些简单的修改即可使其在 r69 中工作。当我设置 Sprite 的位置时，它不会将其绘制在其位置。这是所发生情况的屏幕截图:

我还将包含用于生成 Sprite 的代码:

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);

当我生成 Canvas 和 SpriteMaterial 时，我是否做错了什么？或者是别的什么？我希望 Sprite 围绕其中心旋转，而不是完全在 Canvas 之外的某个点。

Answer 1

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

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