Improve HTMLMesh (transparent and html size changes)

examples/files.json

@@ -338,6 +338,7 @@
 		"webxr_vr_handinput_pointerdrag",
 		"webxr_vr_handinput_pressbutton",
 		"webxr_vr_haptics",
+		"webxr_vr_htmlmesh",
 		"webxr_vr_layers",
 		"webxr_vr_panorama",
 		"webxr_vr_panorama_depth",

examples/js/interactive/HTMLMesh.js

@@ -8,7 +8,8 @@
 			const geometry = new THREE.PlaneGeometry( texture.image.width * 0.001, texture.image.height * 0.001 );
 			const material = new THREE.MeshBasicMaterial( {
 				map: texture,
-				toneMapped: false
+				toneMapped: false,
+				transparent: true
 			} );
 			super( geometry, material );
 
@@ -83,7 +84,19 @@
 
 		update() {
 
-			this.image = html2canvas( this.dom );
+			this.image = html2canvas( this.dom ); //when canvas size changed, this is needed; but I don't understand why! Do we lose time to call it at every update?
+
+			if ( ! this.prevCanvasSize || this.image.width !== this.prevCanvasSize.width || this.image.height !== this.prevCanvasSize.height ) {
+
+				this.prevCanvasSize = {
+					width: this.image.width,
+					height: this.image.height
+				};
+				super.dispose();
+				console.log( 'canvas size changed, dispose' ); //I'll remove that later
+
+			}
+
 			this.needsUpdate = true;
 			this.scheduleUpdate = null;
 
@@ -293,6 +306,16 @@
 
 			}
 
+			if ( element.shadowRoot ) {
+
+				for ( let i = 0; i < element.shadowRoot.childNodes.length; i ++ ) {
+
+					drawElement( element.shadowRoot.childNodes[ i ], style );
+
+				}
+
+			}
+
 			if ( isClipping ) clipper.remove();
 
 		}
@@ -353,6 +376,16 @@
 
 				}
 
+				if ( element.shadowRoot ) {
+
+					for ( let i = 0; i < element.shadowRoot.childNodes.length; i ++ ) {
+
+						traverse( element.shadowRoot.childNodes[ i ] );
+
+					}
+
+				}
+
 			}
 
 		}

examples/jsm/interactive/HTMLMesh.js

@@ -14,7 +14,7 @@ class HTMLMesh extends Mesh {
 		const texture = new HTMLTexture( dom );
 
 		const geometry = new PlaneGeometry( texture.image.width * 0.001, texture.image.height * 0.001 );
-		const material = new MeshBasicMaterial( { map: texture, toneMapped: false } );
+		const material = new MeshBasicMaterial( { map: texture, toneMapped: false, transparent: true } );
 
 		super( geometry, material );
 
@@ -92,6 +92,14 @@ class HTMLTexture extends CanvasTexture {
 	update() {
 
 		this.image = html2canvas( this.dom );
+
+		//when canvas size changed, this is needed; but I don't understand why! Do we lose time to call it at every update?
+		if ( !this.prevCanvasSize || this.image.width !== this.prevCanvasSize.width || this.image.height !== this.prevCanvasSize.height) {
+			this.prevCanvasSize = { width: this.image.width, height: this.image.height };
+			super.dispose();
+			console.log("canvas size changed, dispose"); //I'll remove that later
+		}
+
 		this.needsUpdate = true;
 
 		this.scheduleUpdate = null;
@@ -308,6 +316,14 @@ function html2canvas( element ) {
 
 		}
 
+		if(element.shadowRoot) {
+			for ( let i = 0; i < element.shadowRoot.childNodes.length; i ++ ) {
+
+				drawElement( element.shadowRoot.childNodes[ i ], style );
+
+			}
+		}
+
 		if ( isClipping ) clipper.remove();
 
 	}
@@ -375,6 +391,15 @@ function htmlevent( element, event, x, y ) {
 
 			}
 
+			if(element.shadowRoot) {
+
+				for ( let i = 0; i < element.shadowRoot.childNodes.length; i ++ ) {
+
+					traverse( element.shadowRoot.childNodes[ i ] );
+
+				}
+			}
+
 		}
 
 	}