Three.js - Why is my sprite drawing somewhere other than its position?

I am using Three.js r69.

I am drawing several sprites, each with a canvas texture so that I can draw text on it. I am following the guidelines outlined in this question with a few simple modifications to get it to work in r69. When I set the position of the sprite, it doesn't draw it in its position. Here's a screenshot of what's going on: enter image description here

I'll also include the code I'm using to create the 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;
//             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);

      

Am I doing something wrong when I create the canvas and SpriteMaterial? Or something else? I would like the sprite to rotate around its center, not some point that is completely outside the canvas.

+3


source to share


1 answer


It looks like I didn't explicitly set the canvas size, so it didn't go over 300 x 150 by default.



I have set the canvas size to be the size of the text label and it positions it correctly.

+1


source







All Articles