feat: Add visibilitychange event to Object3D

Emit event when visible property changes. Fixes #32767

Author: DennisSmolek

src/core/Object3D.js

@@ -55,6 +55,15 @@ const _childaddedEvent = { type: 'childadded', child: null };
  */
 const _childremovedEvent = { type: 'childremoved', child: null };
 
+/**
+ * Fires when the object's visibility has changed.
+ *
+ * @event Object3D#visibilitychange
+ * @type {Object}
+ * @property {boolean} visible - The new visibility state.
+ */
+const _visibilitychangeEvent = { type: 'visibilitychange', visible: null };
+
 /**
  * This is the base class for most objects in three.js and provides a set of
  * properties and methods for manipulating objects in 3D space.
@@ -141,6 +150,7 @@ class Object3D extends EventDispatcher {
 		const rotation = new Euler();
 		const quaternion = new Quaternion();
 		const scale = new Vector3( 1, 1, 1 );
+		let visible = true;
 
 		function onRotationChange() {
 
@@ -222,6 +232,34 @@ class Object3D extends EventDispatcher {
 			 */
 			normalMatrix: {
 				value: new Matrix3()
+			},
+			/**
+			 * When set to `true`, the 3D object gets rendered.
+			 *
+			 * @name Object3D#visible
+			 * @type {boolean}
+			 * @default true
+			 */
+			visible: {
+				configurable: true,
+				enumerable: true,
+				get() {
+
+					return visible;
+
+				},
+				set( value ) {
+
+					if ( visible !== value ) {
+
+						visible = value;
+						_visibilitychangeEvent.visible = value;
+						this.dispatchEvent( _visibilitychangeEvent );
+						_visibilitychangeEvent.visible = null;
+
+					}
+
+				}
 			}
 		} );
 
@@ -280,14 +318,6 @@ class Object3D extends EventDispatcher {
 		 */
 		this.layers = new Layers();
 
-		/**
-		 * When set to `true`, the 3D object gets rendered.
-		 *
-		 * @type {boolean}
-		 * @default true
-		 */
-		this.visible = true;
-
 		/**
 		 * When set to `true`, the 3D object gets rendered into shadow maps.
 		 *

test/unit/src/core/Object3D.tests.js

@@ -682,6 +682,45 @@ export default QUnit.module( 'Core', () => {
 
 		} );
 
+		QUnit.test( 'visibilitychange event', ( assert ) => {
+
+			const obj = new Object3D();
+			let eventCount = 0;
+			let lastEventVisible = null;
+
+			obj.addEventListener( 'visibilitychange', function ( event ) {
+
+				eventCount ++;
+				lastEventVisible = event.visible;
+
+			} );
+
+			// Initial state
+			assert.strictEqual( obj.visible, true, 'Object starts visible' );
+			assert.strictEqual( eventCount, 0, 'No events fired initially' );
+
+			// Change visibility to false
+			obj.visible = false;
+			assert.strictEqual( obj.visible, false, 'Visibility changed to false' );
+			assert.strictEqual( eventCount, 1, 'Event fired when visibility changed' );
+			assert.strictEqual( lastEventVisible, false, 'Event contains correct visible value (false)' );
+
+			// Set to same value - should not fire event
+			obj.visible = false;
+			assert.strictEqual( eventCount, 1, 'No event fired when setting same value' );
+
+			// Change visibility back to true
+			obj.visible = true;
+			assert.strictEqual( obj.visible, true, 'Visibility changed to true' );
+			assert.strictEqual( eventCount, 2, 'Event fired when visibility changed back' );
+			assert.strictEqual( lastEventVisible, true, 'Event contains correct visible value (true)' );
+
+			// Set to same value again - should not fire event
+			obj.visible = true;
+			assert.strictEqual( eventCount, 2, 'No event fired when setting same value again' );
+
+		} );
+
 		QUnit.test( 'updateMatrix', ( assert ) => {
 
 			const a = new Object3D();