CSS3DRenderer: Support CSS3DSprite screen-space rotation (#21823)

* Introduce CSS3DSprite.spriteRotation

* CSS3DSprite: .spriteRotation -> .rotation2D

examples/js/renderers/CSS3DRenderer.js

@@ -45,6 +45,15 @@
 		constructor( element ) {
 
 			super( element );
+			this.rotation2D = 0;
+
+		}
+
+		copy( source, recursive ) {
+
+			super.copy( source, recursive );
+			this.rotation2D = source.rotation2D;
+			return this;
 
 		}
 
@@ -54,6 +63,8 @@
 
 	const _matrix = new THREE.Matrix4();
 
+	const _matrix2 = new THREE.Matrix4();
+
 	class CSS3DRenderer {
 
 		constructor() {
@@ -172,6 +183,8 @@
 
 						_matrix.transpose();
 
+						if ( object.rotation2D !== 0 ) _matrix.multiply( _matrix2.makeRotationZ( object.rotation2D ) );
+
 						_matrix.copyPosition( object.matrixWorld );
 
 						_matrix.scale( object.scale );

examples/jsm/renderers/CSS3DRenderer.js

@@ -53,6 +53,18 @@ class CSS3DSprite extends CSS3DObject {
 
 		super( element );
 
+		this.rotation2D = 0;
+
+	}
+
+	copy( source, recursive ) {
+
+		super.copy( source, recursive );
+
+		this.rotation2D = source.rotation2D;
+
+		return this;
+
 	}
 
 }
@@ -62,6 +74,7 @@ CSS3DSprite.prototype.isCSS3DSprite = true;
 //
 
 const _matrix = new Matrix4();
+const _matrix2 = new Matrix4();
 
 class CSS3DRenderer {
 
@@ -226,6 +239,9 @@ class CSS3DRenderer {
 
 					_matrix.copy( camera.matrixWorldInverse );
 					_matrix.transpose();
+
+					if ( object.rotation2D !== 0 ) _matrix.multiply( _matrix2.makeRotationZ( object.rotation2D ) );
+
 					_matrix.copyPosition( object.matrixWorld );
 					_matrix.scale( object.scale );