Skip to content

CSS2DRenderer: Support Rotation#33474

Open
WestLangley wants to merge 2 commits intomrdoob:devfrom
WestLangley:dev-css2Drenderer_rotation
Open

CSS2DRenderer: Support Rotation#33474
WestLangley wants to merge 2 commits intomrdoob:devfrom
WestLangley:dev-css2Drenderer_rotation

Conversation

@WestLangley
Copy link
Copy Markdown
Collaborator

@WestLangley WestLangley commented Apr 26, 2026

Fixes: #33455

In this PR, the existing .center property serves a dual purpose. It is both the center of rotation and the anchor point. I am not sure there is a need to decouple them.

I think "anchor" or "pivot" would be better nomenclature -- for a future PR, perhaps.

@WestLangley WestLangley added this to the r185 milestone Apr 26, 2026
* `( 0, 0 )` is the lower left, `( 1, 1 )` is the top right.
* The object's anchor point, and the point around which the object rotates.
* A value of `(0.5, 0.5)` corresponds to the midpoint of the object. A value
* of `(0, 0)` corresponds to the upper left corner of the object.
Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did not change the implementation of the "center" API. (0, 0) was always the upper-left, not the lower-left, in this renderer.

The upper-left/lower-left convention is not consistent in three.js, and perhaps it would be advisable to agree to a convention going forward.

* @type {number}
* @default 0
*/
this.rotationAngle = 0;
Copy link
Copy Markdown
Collaborator Author

@WestLangley WestLangley Apr 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can't use rotation for the name. CSS3DRenderer uses rotation2D.

@WestLangley
Copy link
Copy Markdown
Collaborator Author

WestLangley commented Apr 26, 2026

Temporary live example. I intend to revert the changes to this example.

https://raw.githack.com/westlangley/three.js/dev-css2Drenderer_rotation/examples/css2d_label.html

@WestLangley
Copy link
Copy Markdown
Collaborator Author

/ping @johnperry-math @yomotsu

@WestLangley WestLangley marked this pull request as ready for review April 30, 2026 01:04
@johnperry-math
Copy link
Copy Markdown

I like the change. My only suggestion would be to add some words to the description of the CSS2DObject to the effect of

  • transformations can only be performed using CSS rotate property and the .center and rotationAngle properties.
  • the effect of these transformations is equivalent to the CSS transform rotate(<value_of_css_rotate>) translate(..,..) translate(..,..) rotate(<value_of_rotationAngle>) (correcting what i've written as need be

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Ability to rotate a CSS2DObject

2 participants