Sprite scaling causes incorrect positioning and rotation starting from r63

[Marco-Sulla]

This is a minimal testcase to show the problem:

r62:
https://jsfiddle.net/qqefadu8/4/

r63:
https://jsfiddle.net/qqefadu8/5/

As you can see, sprites in r62 are correctly positioned, and their rotation is correct. In r63, their position is weird, and they seems to rotate respect to a center that is far from the expected one.

It seems the problem is caused by sprite scaling. Indeed using sprite.scale.set(2,1,1.0); instead of sprite.scale.set(100,50,1.0); and a larger font size seems to relax the problem.

In tests I use an older version of TrackballControls, but the issue remains also using the newer one or OrbitControls. Furthermore the problem happens also using r74, of course.

browser: Firefox 41.0.2
OS: Linux (Lubuntu 14.04)
Graphic card: Intel HD Graphics 4400 (integrated in cpu Intel i5-4210U)

[WestLangley]

https://github.com/mrdoob/three.js/releases/tag/r63

If you need help, please use stackoverflow. But post your question using the current release of three.js. The r.62/63 versions are more than 2 years old.

[Marco-Sulla]

Not a request of help. Code seems to be correct to me. Maybe I'm wrong, but IMHO it's a bug.

[Marco-Sulla]

Furthermore I'm using r63 to show the point of the behaviour change, but this happens also with the latest release, of course.

[Marco-Sulla]

Excuse me for multiple posts, I forgot to mention that the problem is probably caused by sprite scaling. I updated the first post.

[mrdoob]

I don't think the provided jsfiddles are clear enough. What's the issue exactly?

[Marco-Sulla]

The sprite with the text "1" should be near the vertex, as in the r62 fiddle. But in r63 fiddle the sprite is quite distant.

Furthermore, if you rotate the camera, you see the "1" rotating around the cube vertex, while in r62 it rotates around its own upper left corner.

It seems the width of the sprite is considered much larger than its real content, once scaled. If you don't scale it, the behavior is correct.

[Marco-Sulla]

Se this fiddle for example: https://jsfiddle.net/m08abjcL/
Here I'm using the latest three.js revision, but without scaling. I've simply resized the cube and used a larger font. Without scaling, sprite positioning is correct.

[WestLangley]

You are not setting the canvas size. It defaults to 300 x 150. It should be square to match the aspect ratio of the sprite.
https://jsfiddle.net/m08abjcL/1/
If you need further help, please use stackoverflow.

[Marco-Sulla]

Nope, it does not fix the problem completely. I'll hope this will convince you this is a bug :)

See this fiddle:
https://jsfiddle.net/nwLLq8q1/

if you rotate the camera, the numbers seems to go inside and outside the grid. For example, if you rotate the camera so grid is in its normal position (blue grid behind, red one below and green on the left), numbers are on the left of the green grid. If you turn the camera 180°, you'll see the numbers on the left of the green grid again. But they should be on the right!

In r62 this problem does not happen:
https://jsfiddle.net/cjfwg2c4/

Note that I removed scaling and applied the resize of the canvas, as you suggested.

[WestLangley]

I have, again, modified your code to show you what is happening.

62: https://jsfiddle.net/cjfwg2c4/1/ - sprite upper left located at position
74: https://jsfiddle.net/nwLLq8q1/1/ - sprite center located at position

As stated in https://github.com/mrdoob/three.js/releases/tag/r63, sprite alignment was removed, and the sprite is now centered.

[MasterJames]

BTW They are both rendered black on Mobile Android.

[Marco-Sulla]

Uops, so I was wrong, this is not a bug after all. Excuse me.

[Ryan-Haines]

I don't understand how this is not a bug. I cannot wrap my head around why having a sprite change position when it is scaled is not a bug. Scaling a sprite should not alter it's position.

I've reached a real frustration point over this. I want to draw a line between two points, put a sprite at one of the points, and scale up the sprite, but I simply cannot achieve this because the sprite moves once scaling is applied!

I am setting the size of the canvas. I've read through this thread, and pretty much every stackoverflow post I could find, without finding any solution. Can anyone shed some light on the pattern to scale a sprite in place? This should be simple but is proving to be extremely difficult, and that this worked correctly in r62 as demonstrated by MarcoSulla is even more baffling.

[mrdoob]

@Ryan-Haines Didn't @MarcoSulla said is not a bug on the post before yours?

[yiakwy]

@mrdoob @WestLangley I thinks this should be a bug.

When you use

context.fillRect( 0, 0, canvas.width, canvas.height );

The canvas width is much lager than what people actually need. However you can change canvas.width to adjust the size. There is no solution to perfectly place the spritey without making twists on original correct position data (using shift)

[mrdoob]

#12931 Added a center property to Sprite.