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:
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