CSS2DRenderer: Introduce CSS2DObject.center (#25673)

* CSS2DRenderer: Introduce CSS2DObject.center

* Update css2d_label screenshot

* fix gui

examples/css2d_label.html

@@ -85,11 +85,10 @@
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 200 );
 				camera.position.set( 10, 5, 20 );
 				camera.layers.enableAll();
-				camera.layers.toggle( 1 );
 
 				scene = new THREE.Scene();
 
-				const dirLight = new THREE.DirectionalLight( 0xffffff );
+				const dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
 				dirLight.position.set( 0, 0, 1 );
 				dirLight.layers.enableAll();
 				scene.add( dirLight );
@@ -128,36 +127,44 @@
 				const earthDiv = document.createElement( 'div' );
 				earthDiv.className = 'label';
 				earthDiv.textContent = 'Earth';
-				earthDiv.style.marginTop = '-1em';
+				earthDiv.style.backgroundColor = 'transparent';
+
 				const earthLabel = new CSS2DObject( earthDiv );
-				earthLabel.position.set( 0, EARTH_RADIUS, 0 );
+				earthLabel.position.set( 1.5 * EARTH_RADIUS, 0, 0 );
+				earthLabel.center.set( 0, 1 );
 				earth.add( earthLabel );
 				earthLabel.layers.set( 0 );
 
 				const earthMassDiv = document.createElement( 'div' );
 				earthMassDiv.className = 'label';
 				earthMassDiv.textContent = '5.97237e24 kg';
-				earthMassDiv.style.marginTop = '-1em';
+				earthMassDiv.style.backgroundColor = 'transparent';
+
 				const earthMassLabel = new CSS2DObject( earthMassDiv );
-				earthMassLabel.position.set( 0, - 2 * EARTH_RADIUS, 0 );
+				earthMassLabel.position.set( 1.5 * EARTH_RADIUS, 0, 0 );
+				earthMassLabel.center.set( 0, 0 );
 				earth.add( earthMassLabel );
 				earthMassLabel.layers.set( 1 );
 
 				const moonDiv = document.createElement( 'div' );
 				moonDiv.className = 'label';
 				moonDiv.textContent = 'Moon';
-				moonDiv.style.marginTop = '-1em';
+				moonDiv.style.backgroundColor = 'transparent';
+
 				const moonLabel = new CSS2DObject( moonDiv );
-				moonLabel.position.set( 0, MOON_RADIUS, 0 );
+				moonLabel.position.set( 1.5 * MOON_RADIUS, 0, 0 );
+				moonLabel.center.set( 0, 1 );
 				moon.add( moonLabel );
 				moonLabel.layers.set( 0 );
 
 				const moonMassDiv = document.createElement( 'div' );
 				moonMassDiv.className = 'label';
 				moonMassDiv.textContent = '7.342e22 kg';
-				moonMassDiv.style.marginTop = '-1em';
+				moonMassDiv.style.backgroundColor = 'transparent';
+
 				const moonMassLabel = new CSS2DObject( moonMassDiv );
-				moonMassLabel.position.set( 0, - 2 * MOON_RADIUS, 0 );
+				moonMassLabel.position.set( 1.5 * MOON_RADIUS, 0, 0 );
+				moonMassLabel.center.set( 0, 0 );
 				moon.add( moonMassLabel );
 				moonMassLabel.layers.set( 1 );
 
@@ -218,11 +225,15 @@
 
 				gui = new GUI();
 
+				gui.title( 'Camera Layers' );
+
 				gui.add( layers, 'Toggle Name' );
 				gui.add( layers, 'Toggle Mass' );
 				gui.add( layers, 'Enable All' );
 				gui.add( layers, 'Disable All' );
 
+				gui.open();
+
 			}
 
 		</script>

examples/jsm/renderers/CSS2DRenderer.js

@@ -1,6 +1,7 @@
 import {
 	Matrix4,
 	Object3D,
+	Vector2,
 	Vector3
 } from 'three';
 
@@ -19,6 +20,8 @@ class CSS2DObject extends Object3D {
 
 		this.element.setAttribute( 'draggable', false );
 
+		this.center = new Vector2( 0.5, 0.5 ); // ( 0, 0 ) is the lower left; ( 1, 1 ) is the top right
+
 		this.addEventListener( 'removed', function () {
 
 			this.traverse( function ( object ) {
@@ -41,6 +44,8 @@ class CSS2DObject extends Object3D {
 
 		this.element = source.element.cloneNode( true );
 
+		this.center = source.center;
+
 		return this;
 
 	}
@@ -125,7 +130,7 @@ class CSS2DRenderer {
 
 					const element = object.element;
 
-					element.style.transform = 'translate(-50%,-50%) translate(' + ( _vector.x * _widthHalf + _widthHalf ) + 'px,' + ( - _vector.y * _heightHalf + _heightHalf ) + 'px)';
+					element.style.transform = 'translate(' + ( - 100 * object.center.x ) + '%,' + ( - 100 * object.center.y ) + '%)' +  'translate(' + ( _vector.x * _widthHalf + _widthHalf ) + 'px,' + ( - _vector.y * _heightHalf + _heightHalf ) + 'px)';
 
 					if ( element.parentNode !== domElement ) {