From 24595fb65bb662ea1e70984bb18301af06637b07 Mon Sep 17 00:00:00 2001
From: Michael Herzog <michael.herzog@human-interactive.org>
Date: Thu, 6 Aug 2026 13:13:14 +0200
Subject: [PATCH] HTMLMesh: Improve form controls support. (#34172)

---
 examples/jsm/interactive/HTMLMesh.js | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/examples/jsm/interactive/HTMLMesh.js b/examples/jsm/interactive/HTMLMesh.js
index 22ac002d08c843..118c5474112e4a 100644
--- a/examples/jsm/interactive/HTMLMesh.js
+++ b/examples/jsm/interactive/HTMLMesh.js
@@ -90,8 +90,9 @@ class HTMLTexture extends CanvasTexture {
 		this.magFilter = LinearFilter;
 		this.generateMipmaps = false;
 
-		// Create an observer on the DOM, and run html2canvas update in the next loop
-		const observer = new MutationObserver( () => {
+		this.scheduleUpdate = null;
+
+		const scheduleUpdate = () => {
 
 			if ( ! this.scheduleUpdate ) {
 
@@ -100,13 +101,25 @@ class HTMLTexture extends CanvasTexture {
 
 			}
 
-		} );
+		};
+
+		// Create an observer on the DOM, and run html2canvas update in the next loop
+
+		const observer = new MutationObserver( scheduleUpdate );
+
+		// The state of form controls lives in properties (checked, value) which
+		// are not reported by MutationObserver, so listen to their events as well.
+
+		dom.addEventListener( 'input', scheduleUpdate );
+		dom.addEventListener( 'change', scheduleUpdate );
 
 		const config = { attributes: true, childList: true, subtree: true, characterData: true };
 		observer.observe( dom, config );
 
 		this.observer = observer;
 
+		this._scheduleUpdate = scheduleUpdate;
+
 	}
 
 	dispatchDOMEvent( event ) {
@@ -136,6 +149,9 @@ class HTMLTexture extends CanvasTexture {
 
 		}
 
+		this.dom.removeEventListener( 'input', this._scheduleUpdate );
+		this.dom.removeEventListener( 'change', this._scheduleUpdate );
+
 		this.scheduleUpdate = clearTimeout( this.scheduleUpdate );
 
 		super.dispose();