Add example of invisible elements, fix bug (#23360)

examples/css2d_label.html

@@ -36,8 +36,38 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { CSS2DRenderer, CSS2DObject } from './jsm/renderers/CSS2DRenderer.js';
 
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
+
+			let gui;
+
 			let camera, scene, renderer, labelRenderer;
 
+			const layers = {
+
+				'Toggle Name': function () {
+
+					camera.layers.toggle( 0 );
+
+				},
+				'Toggle Mass': function () {
+
+					camera.layers.toggle( 1 );
+
+				},
+				'Enable All': function () {
+
+					camera.layers.enableAll();
+
+				},
+
+				'Disable All': function () {
+
+					camera.layers.disableAll();
+
+				}
+
+			}
+
 			const clock = new THREE.Clock();
 			const textureLoader = new THREE.TextureLoader();
 
@@ -53,14 +83,18 @@
 
 				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 );
 				dirLight.position.set( 0, 0, 1 );
+				dirLight.layers.enableAll();
 				scene.add( dirLight );
 
 				const axesHelper = new THREE.AxesHelper( 5 );
+				axesHelper.layers.enableAll();
 				scene.add( axesHelper );
 
 				//
@@ -87,6 +121,9 @@
 
 				//
 
+				earth.layers.enableAll();
+				moon.layers.enableAll();
+
 				const earthDiv = document.createElement( 'div' );
 				earthDiv.className = 'label';
 				earthDiv.textContent = 'Earth';
@@ -94,6 +131,16 @@
 				const earthLabel = new CSS2DObject( earthDiv );
 				earthLabel.position.set( 0, EARTH_RADIUS, 0 );
 				earth.add( earthLabel );
+				earthLabel.layers.set( 0 );
+
+				const earthMassDiv = document.createElement( 'div' );
+				earthMassDiv.className = 'label';
+				earthMassDiv.textContent = '5.97237e24 kg';
+				earthMassDiv.style.marginTop = '-1em';
+				const earthMassLabel = new CSS2DObject( earthMassDiv );
+				earthMassLabel.position.set( 0, - 2 * EARTH_RADIUS, 0 );
+				earth.add( earthMassLabel );
+				earthMassLabel.layers.set( 1 );
 
 				const moonDiv = document.createElement( 'div' );
 				moonDiv.className = 'label';
@@ -102,6 +149,16 @@
 				const moonLabel = new CSS2DObject( moonDiv );
 				moonLabel.position.set( 0, MOON_RADIUS, 0 );
 				moon.add( moonLabel );
+				moonLabel.layers.set( 0 );
+
+				const moonMassDiv = document.createElement( 'div' );
+				moonMassDiv.className = 'label';
+				moonMassDiv.textContent = '7.342e22 kg';
+				moonMassDiv.style.marginTop = '-1em';
+				const moonMassLabel = new CSS2DObject( moonMassDiv );
+				moonMassLabel.position.set( 0, - 2 * MOON_RADIUS, 0 );
+				moon.add( moonMassLabel );
+				moonMassLabel.layers.set( 1 );
 
 				//
 
@@ -124,6 +181,8 @@
 
 				window.addEventListener( 'resize', onWindowResize );
 
+				initGui();
+
 			}
 
 			function onWindowResize() {
@@ -152,6 +211,19 @@
 
 			}
 
+			//
+
+			function initGui() {
+
+				gui = new GUI();
+
+				gui.add( layers, 'Toggle Name' );
+				gui.add( layers, 'Toggle Mass' );
+				gui.add( layers, 'Enable All' );
+				gui.add( layers, 'Disable All' );
+
+			}
+
 		</script>
 	</body>
 </html>

examples/jsm/renderers/CSS2DRenderer.js

@@ -136,12 +136,6 @@ class CSS2DRenderer {
 
 					}
 
-					const objectData = {
-						distanceToCameraSquared: getDistanceToSquared( camera, object )
-					};
-
-					cache.objects.set( object, objectData );
-
 					if ( element.parentNode !== domElement ) {
 
 						domElement.appendChild( element );
@@ -152,6 +146,12 @@ class CSS2DRenderer {
 
 				}
 
+				const objectData = {
+					distanceToCameraSquared: getDistanceToSquared( camera, object )
+				};
+
+				cache.objects.set( object, objectData );
+
 			}
 
 			for ( let i = 0, l = object.children.length; i < l; i ++ ) {