Sprite: Add center property

[WestLangley]

As discussed in #12878.

The nomenclature or API can be changed, but I think this is a long-overdue feature that is useful in positioning sprites -- and in particular, text sprites.

Sprites can now be left-, center-, or right-justified relative to the sprite's position.

Sprites now rotate around, and scale relative to, their pivot.

[Mugen87]

Cool! 👍

[WestLangley]

@mrdoob Can we discuss this? I am open to alternative APIs...

I think being able to anchor a sprite at a point other than its center is a nice feature.

Since all sprites share the same geometry, we can't translate the geometry itself, but instead make the adjustment in the vertex shader -- just as we do when we rotate a sprite.

[mrdoob]

Looks good! Instead of pivot I think I would call it center though.

[mrdoob]

Also I would set it to 0.5, 0.5 by default to maintain backwards compatibility.

[WestLangley]

Also I would set it to 0.5, 0.5 by default to maintain backwards compatibility.

I will definitely maintain backwards compatibility.

But currently, the center is ( 0, 0 ); lower left Is ( - 0.5, - 0.5 ). This is because the sprite geometry is centered a the origin. What we are specifying, in effect, is a translation of the geometry.

This is obviously different than CSS.

[mrdoob]

Ah, I see... Yeah, I don't think that's very intuitive. I was thinking that by renaming it to center we could align the usage a bit to Texture's center.

[WestLangley]

We can name it center, and we could delcare ( 0.5, 0.5 ) to be the center of the texture, but where is ( 0, 0 ) then? -- top left as in canvas, or bottom left as in UVs? That is a bit confusing.

We could name it offset, in which case ( 0, 0 ) would be the center, ( -0.5, 0.5 ) would be the top left. (I favor this solution, I think.)

[mrdoob]

We can name it center, and we could delcare ( 0.5, 0.5 ) to be the center of the texture, but where is ( 0, 0 ) then? -- top left as in canvas, or bottom left as in UVs? That is a bit confusing.

I think 0,0 would be top-left. When dealing with 2D concepts I think it's more intuitive to think 0,0 being top-left. At least that way Sprite's center will match Texture's center.

[WestLangley]

I think 0,0 would be top-left. ... At least that way Sprite's center will match Texture's center.

We can declare ( 0.5, 0.5 ) to be the center of the sprite, as it is for textures. But ( 0, 0 ) is the lower-left for textures (since these are uv coordinates).

https://threejs.org/examples/webgl_materials_texture_rotation.html

[mrdoob]

I see... Okay, let's do that.

[WestLangley]

Done!

[mrdoob]

Sweet! Thanks!

[mrdoob]

Hmmm, I guess we should add this to a example?

[WestLangley]

Hmmm, I guess we should add this to a example?

This feature was added to an existing example in this PR.

[mrdoob]

Oh, true...
I guess the example doesn't showcase the new feature.
Let me fix that.

[mrdoob]

Hmm... I just tried adding:

spriteTL.rotation += 0.01;
spriteTR.rotation += 0.01;
spriteBL.rotation += 0.01;
spriteBR.rotation += 0.01;

And I noticed/remembered that the rotation is in the material 🤔

[mrdoob]

Hmm... Maybe a new example is required...

[WestLangley]

It can be handy when used with text labels -- not for rotating them necessarily, but for adjusting the anchor point.