CSS2DObject and CSS3DObject visibility needs to consider whether ance…

…stors are visible (#28293) * CSS2DObject and CSS3DObject visibility needs to consider whether ancestors are visible * Update CSS2DRenderer.js Clean up. * Update CSS3DRenderer.js Clean up. * Update CSS3DRenderer.js More clean up. * Optimize CSS renderers code * Update CSS2DRenderer.js Clean up. * Update CSS3DRenderer.js Clean up. * Update CSS2DRenderer.js Simplify code. * Update CSS3DRenderer.js Simplify code. --------- Co-authored-by: Michael Herzog <michael.herzog@human-interactive.org>
mrdoob · May 9, 2024 · 66a31ae · 66a31ae
1 parent b8c4dce
commit 66a31ae
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 4 deletions.
diff --git a/examples/jsm/renderers/CSS2DRenderer.js b/examples/jsm/renderers/CSS2DRenderer.js
@@ -96,6 +96,7 @@ class CSS2DRenderer {
 			_viewMatrix.copy( camera.matrixWorldInverse );
 			_viewProjectionMatrix.multiplyMatrices( camera.projectionMatrix, _viewMatrix );
 
+			hideObject( scene );
 			renderObject( scene, scene, camera );
 			zOrder( scene );
 
@@ -114,22 +115,36 @@ class CSS2DRenderer {
 
 		};
 
+		function hideObject( object ) {
+
+			if ( object.isCSS2DObject ) object.element.style.display = 'none';
+
+			for ( let i = 0, l = object.children.length; i < l; i ++ ) {
+
+				hideObject( object.children[ i ] );
+
+			}
+		}
+
 		function renderObject( object, scene, camera ) {
 
+			if ( object.visible === false ) return;
+
 			if ( object.isCSS2DObject ) {
 
 				_vector.setFromMatrixPosition( object.matrixWorld );
 				_vector.applyMatrix4( _viewProjectionMatrix );
 
-				const visible = ( object.visible === true ) && ( _vector.z >= - 1 && _vector.z <= 1 ) && ( object.layers.test( camera.layers ) === true );
-				object.element.style.display = ( visible === true ) ? '' : 'none';
+				const visible = ( _vector.z >= - 1 && _vector.z <= 1 ) && ( object.layers.test( camera.layers ) === true );
 
 				if ( visible === true ) {
 
 					object.onBeforeRender( _this, scene, camera );
 
 					const element = object.element;
 
+					element.style.display = '';
+
 					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 ) {

diff --git a/examples/jsm/renderers/CSS3DRenderer.js b/examples/jsm/renderers/CSS3DRenderer.js
@@ -172,6 +172,7 @@ class CSS3DRenderer {
 
 			}
 
+			hideObject( scene );
 			renderObject( scene, scene, camera, cameraCSSMatrix );
 
 		};
@@ -251,12 +252,25 @@ class CSS3DRenderer {
 
 		}
 
+		function hideObject( object ) {
+
+			if ( object.isCSS3DObject ) object.element.style.display = 'none';
+
+			for ( let i = 0, l = object.children.length; i < l; i ++ ) {
+
+			  hideObject( object.children[ i ] );
+
+			}
+
+		}
+
 		function renderObject( object, scene, camera, cameraCSSMatrix ) {
 
+			if ( object.visible === false ) return;
+
 			if ( object.isCSS3DObject ) {
 
-				const visible = ( object.visible === true ) && ( object.layers.test( camera.layers ) === true );
-				object.element.style.display = ( visible === true ) ? '' : 'none';
+				const visible = ( object.layers.test( camera.layers ) === true );
 
 				if ( visible === true ) {
 
@@ -293,6 +307,8 @@ class CSS3DRenderer {
 					const element = object.element;
 					const cachedObject = cache.objects.get( object );
 
+					element.style.display = '';
+
 					if ( cachedObject === undefined || cachedObject.style !== style ) {
 
 						element.style.transform = style;