add support for Layers to CSS3DObject/CSS2DRenderer (#23316)

* CSS3DRenderer: add support for Layers to CSS3DObject

* CSS3DRenderer/CSS2DRenderer: support for Layers

* build-examples

Co-authored-by: meijy <[email protected]>

examples/js/renderers/CSS2DRenderer.js

@@ -102,38 +102,44 @@
 
 				if ( object.isCSS2DObject ) {
 
-					object.onBeforeRender( _this, scene, camera );
+					const visible = object.visible && _vector.z >= - 1 && _vector.z <= 1 && object.layers.test( camera.layers );
+					object.element.style.display = visible ? '' : 'none';
 
-					_vector.setFromMatrixPosition( object.matrixWorld );
+					if ( visible ) {
 
-					_vector.applyMatrix4( _viewProjectionMatrix );
+						object.onBeforeRender( _this, scene, camera );
 
-					const element = object.element;
+						_vector.setFromMatrixPosition( object.matrixWorld );
 
-					if ( /apple/i.test( navigator.vendor ) ) {
+						_vector.applyMatrix4( _viewProjectionMatrix );
 
-						// https://github.com/mrdoob/three.js/issues/21415
-						element.style.transform = 'translate(-50%,-50%) translate(' + Math.round( _vector.x * _widthHalf + _widthHalf ) + 'px,' + Math.round( - _vector.y * _heightHalf + _heightHalf ) + 'px)';
+						const element = object.element;
 
-					} else {
+						if ( /apple/i.test( navigator.vendor ) ) {
 
-						element.style.transform = 'translate(-50%,-50%) translate(' + ( _vector.x * _widthHalf + _widthHalf ) + 'px,' + ( - _vector.y * _heightHalf + _heightHalf ) + 'px)';
+							// https://github.com/mrdoob/three.js/issues/21415
+							element.style.transform = 'translate(-50%,-50%) translate(' + Math.round( _vector.x * _widthHalf + _widthHalf ) + 'px,' + Math.round( - _vector.y * _heightHalf + _heightHalf ) + 'px)';
 
-					}
+						} else {
 
-					element.style.display = object.visible && _vector.z >= - 1 && _vector.z <= 1 ? '' : 'none';
-					const objectData = {
-						distanceToCameraSquared: getDistanceToSquared( camera, object )
-					};
-					cache.objects.set( object, objectData );
+							element.style.transform = 'translate(-50%,-50%) translate(' + ( _vector.x * _widthHalf + _widthHalf ) + 'px,' + ( - _vector.y * _heightHalf + _heightHalf ) + 'px)';
 
-					if ( element.parentNode !== domElement ) {
+						}
 
-						domElement.appendChild( element );
+						const objectData = {
+							distanceToCameraSquared: getDistanceToSquared( camera, object )
+						};
+						cache.objects.set( object, objectData );
 
-					}
+						if ( element.parentNode !== domElement ) {
+
+							domElement.appendChild( element );
 
-					object.onAfterRender( _this, scene, camera );
+						}
+
+						object.onAfterRender( _this, scene, camera );
+
+					}
 
 				}
 

examples/js/renderers/CSS3DRenderer.js

@@ -181,57 +181,62 @@
 
 				if ( object.isCSS3DObject ) {
 
-					object.onBeforeRender( _this, scene, camera );
-					let style;
+					const visible = object.visible && object.layers.test( camera.layers );
+					object.element.style.display = visible ? '' : 'none'; // only getObjectCSSMatrix when object.visible
 
-					if ( object.isCSS3DSprite ) {
+					if ( visible ) {
 
-						// http://swiftcoder.wordpress.com/2008/11/25/constructing-a-billboard-matrix/
-						_matrix.copy( camera.matrixWorldInverse );
+						object.onBeforeRender( _this, scene, camera );
+						let style;
 
-						_matrix.transpose();
+						if ( object.isCSS3DSprite ) {
 
-						if ( object.rotation2D !== 0 ) _matrix.multiply( _matrix2.makeRotationZ( object.rotation2D ) );
-						object.matrixWorld.decompose( _position, _quaternion, _scale );
+							// http://swiftcoder.wordpress.com/2008/11/25/constructing-a-billboard-matrix/
+							_matrix.copy( camera.matrixWorldInverse );
 
-						_matrix.setPosition( _position );
+							_matrix.transpose();
 
-						_matrix.scale( _scale );
+							if ( object.rotation2D !== 0 ) _matrix.multiply( _matrix2.makeRotationZ( object.rotation2D ) );
+							object.matrixWorld.decompose( _position, _quaternion, _scale );
 
-						_matrix.elements[ 3 ] = 0;
-						_matrix.elements[ 7 ] = 0;
-						_matrix.elements[ 11 ] = 0;
-						_matrix.elements[ 15 ] = 1;
-						style = getObjectCSSMatrix( _matrix );
+							_matrix.setPosition( _position );
 
-					} else {
+							_matrix.scale( _scale );
 
-						style = getObjectCSSMatrix( object.matrixWorld );
+							_matrix.elements[ 3 ] = 0;
+							_matrix.elements[ 7 ] = 0;
+							_matrix.elements[ 11 ] = 0;
+							_matrix.elements[ 15 ] = 1;
+							style = getObjectCSSMatrix( _matrix );
 
-					}
+						} else {
 
-					const element = object.element;
-					const cachedObject = cache.objects.get( object );
+							style = getObjectCSSMatrix( object.matrixWorld );
 
-					if ( cachedObject === undefined || cachedObject.style !== style ) {
+						}
 
-						element.style.transform = style;
-						const objectData = {
-							style: style
-						};
-						cache.objects.set( object, objectData );
+						const element = object.element;
+						const cachedObject = cache.objects.get( object );
 
-					}
+						if ( cachedObject === undefined || cachedObject.style !== style ) {
 
-					element.style.display = object.visible ? '' : 'none';
+							element.style.transform = style;
+							const objectData = {
+								style: style
+							};
+							cache.objects.set( object, objectData );
 
-					if ( element.parentNode !== cameraElement ) {
+						}
 
-						cameraElement.appendChild( element );
+						if ( element.parentNode !== cameraElement ) {
 
-					}
+							cameraElement.appendChild( element );
 
-					object.onAfterRender( _this, scene, camera );
+						}
+
+						object.onAfterRender( _this, scene, camera );
+
+					}
 
 				}
 

examples/jsm/renderers/CSS2DRenderer.js

@@ -113,39 +113,44 @@ class CSS2DRenderer {
 
 			if ( object.isCSS2DObject ) {
 
-				object.onBeforeRender( _this, scene, camera );
+				const visible = object.visible && _vector.z >= - 1 && _vector.z <= 1 && object.layers.test( camera.layers );
+				object.element.style.display = visible ? '' : 'none';
 
-				_vector.setFromMatrixPosition( object.matrixWorld );
-				_vector.applyMatrix4( _viewProjectionMatrix );
+				if ( visible ) {
 
-				const element = object.element;
+					object.onBeforeRender( _this, scene, camera );
 
-				if ( /apple/i.test( navigator.vendor ) ) {
+					_vector.setFromMatrixPosition( object.matrixWorld );
+					_vector.applyMatrix4( _viewProjectionMatrix );
 
-					// https://github.com/mrdoob/three.js/issues/21415
-					element.style.transform = 'translate(-50%,-50%) translate(' + Math.round( _vector.x * _widthHalf + _widthHalf ) + 'px,' + Math.round( - _vector.y * _heightHalf + _heightHalf ) + 'px)';
+					const element = object.element;
 
-				} else {
+					if ( /apple/i.test( navigator.vendor ) ) {
 
-					element.style.transform = 'translate(-50%,-50%) translate(' + ( _vector.x * _widthHalf + _widthHalf ) + 'px,' + ( - _vector.y * _heightHalf + _heightHalf ) + 'px)';
+						// https://github.com/mrdoob/three.js/issues/21415
+						element.style.transform = 'translate(-50%,-50%) translate(' + Math.round( _vector.x * _widthHalf + _widthHalf ) + 'px,' + Math.round( - _vector.y * _heightHalf + _heightHalf ) + 'px)';
 
-				}
+					} else {
 
-				element.style.display = ( object.visible && _vector.z >= - 1 && _vector.z <= 1 ) ? '' : 'none';
+						element.style.transform = 'translate(-50%,-50%) translate(' + ( _vector.x * _widthHalf + _widthHalf ) + 'px,' + ( - _vector.y * _heightHalf + _heightHalf ) + 'px)';
 
-				const objectData = {
-					distanceToCameraSquared: getDistanceToSquared( camera, object )
-				};
+					}
 
-				cache.objects.set( object, objectData );
+					const objectData = {
+						distanceToCameraSquared: getDistanceToSquared( camera, object )
+					};
 
-				if ( element.parentNode !== domElement ) {
+					cache.objects.set( object, objectData );
 
-					domElement.appendChild( element );
+					if ( element.parentNode !== domElement ) {
 
-				}
+						domElement.appendChild( element );
+
+					}
 
-				object.onAfterRender( _this, scene, camera );
+					object.onAfterRender( _this, scene, camera );
+
+				}
 
 			}
 

examples/jsm/renderers/CSS3DRenderer.js

@@ -239,57 +239,63 @@ class CSS3DRenderer {
 
 			if ( object.isCSS3DObject ) {
 
-				object.onBeforeRender( _this, scene, camera );
+				const visible = object.visible && object.layers.test( camera.layers );
+				object.element.style.display = visible ? '' : 'none';
 
-				let style;
+				// only getObjectCSSMatrix when object.visible
+				if ( visible ) {
 
-				if ( object.isCSS3DSprite ) {
+					object.onBeforeRender( _this, scene, camera );
 
-					// http://swiftcoder.wordpress.com/2008/11/25/constructing-a-billboard-matrix/
+					let style;
 
-					_matrix.copy( camera.matrixWorldInverse );
-					_matrix.transpose();
+					if ( object.isCSS3DSprite ) {
 
-					if ( object.rotation2D !== 0 ) _matrix.multiply( _matrix2.makeRotationZ( object.rotation2D ) );
+						// http://swiftcoder.wordpress.com/2008/11/25/constructing-a-billboard-matrix/
 
-					object.matrixWorld.decompose( _position, _quaternion, _scale );
-					_matrix.setPosition( _position );
-					_matrix.scale( _scale );
+						_matrix.copy( camera.matrixWorldInverse );
+						_matrix.transpose();
 
-					_matrix.elements[ 3 ] = 0;
-					_matrix.elements[ 7 ] = 0;
-					_matrix.elements[ 11 ] = 0;
-					_matrix.elements[ 15 ] = 1;
+						if ( object.rotation2D !== 0 ) _matrix.multiply( _matrix2.makeRotationZ( object.rotation2D ) );
 
-					style = getObjectCSSMatrix( _matrix );
+						object.matrixWorld.decompose( _position, _quaternion, _scale );
+						_matrix.setPosition( _position );
+						_matrix.scale( _scale );
 
-				} else {
+						_matrix.elements[ 3 ] = 0;
+						_matrix.elements[ 7 ] = 0;
+						_matrix.elements[ 11 ] = 0;
+						_matrix.elements[ 15 ] = 1;
 
-					style = getObjectCSSMatrix( object.matrixWorld );
+						style = getObjectCSSMatrix( _matrix );
 
-				}
+					} else {
 
-				const element = object.element;
-				const cachedObject = cache.objects.get( object );
+						style = getObjectCSSMatrix( object.matrixWorld );
 
-				if ( cachedObject === undefined || cachedObject.style !== style ) {
+					}
 
-					element.style.transform = style;
+					const element = object.element;
+					const cachedObject = cache.objects.get( object );
 
-					const objectData = { style: style };
-					cache.objects.set( object, objectData );
+					if ( cachedObject === undefined || cachedObject.style !== style ) {
 
-				}
+						element.style.transform = style;
 
-				element.style.display = object.visible ? '' : 'none';
+						const objectData = { style: style };
+						cache.objects.set( object, objectData );
 
-				if ( element.parentNode !== cameraElement ) {
+					}
 
-					cameraElement.appendChild( element );
+					if ( element.parentNode !== cameraElement ) {
 
-				}
+						cameraElement.appendChild( element );
 
-				object.onAfterRender( _this, scene, camera );
+					}
+
+					object.onAfterRender( _this, scene, camera );
+
+				}
 
 			}