Enable touch for css3d_mixed example (#31979)

* Enabled touch for css3d_mixed example

* Removed isDragging

examples/css3d_mixed.html

@@ -35,6 +35,13 @@
 
 			function init() {
 
+				const controlsDomElement = document.createElement( 'div' );
+				controlsDomElement.style.position = 'absolute';
+				controlsDomElement.style.top = '0';
+				controlsDomElement.style.width = '100%';
+				controlsDomElement.style.height = '100%';
+				document.body.appendChild( controlsDomElement );
+
 				rendererCSS3D = new CSS3DRenderer();
 				rendererCSS3D.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( rendererCSS3D.domElement );
@@ -42,6 +49,7 @@
 				rendererWebGL = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
 				rendererWebGL.domElement.style.position = 'absolute';
 				rendererWebGL.domElement.style.top = '0';
+				rendererWebGL.domElement.style.pointerEvents = 'none';
 				rendererWebGL.setPixelRatio( window.devicePixelRatio );
 				rendererWebGL.setSize( window.innerWidth, window.innerHeight );
 				rendererWebGL.toneMapping = THREE.NeutralToneMapping;
@@ -74,7 +82,6 @@
 					premultipliedAlpha: true
 				} );
 				const mesh = new THREE.Mesh( geometry, material );
-				mesh.name = 'cutout';
 				scene.add( mesh );
 
 				// Add frame
@@ -86,50 +93,17 @@
 				iframe.style.width = '1028px';
 				iframe.style.height = '768px';
 				iframe.style.border = '0px';
+				iframe.style.backfaceVisibility = 'hidden';
 				iframe.src = './#webgl_animation_keyframes';
 				scene.add( new CSS3DObject( iframe ) );
 
 				// Add controls
 				controls = new OrbitControls( camera );
-				controls.connect( rendererWebGL.domElement );
+				controls.connect( controlsDomElement );
+				controls.addEventListener( 'start', () => iframe.style.pointerEvents = 'none' );
+				controls.addEventListener( 'end', () => iframe.style.pointerEvents = 'auto' );
 				controls.enableDamping = true;
 
-				// Track OrbitControls state
-				let isDragging = false;
-				controls.addEventListener( 'start', () => isDragging = true );
-				controls.addEventListener( 'end', () => isDragging = false );
-
-				// raycast to find CSS3DObject
-				const raycaster = new THREE.Raycaster();
-				const pointer = new THREE.Vector2();
-				document.addEventListener( 'pointermove', ( event ) => {
-
-					// Skip raycasting when dragging
-					if ( isDragging ) return;
-
-					pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
-					pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
-
-					raycaster.setFromCamera( pointer, camera );
-
-					const intersects = raycaster.intersectObjects( scene.children, true );
-
-					rendererWebGL.domElement.style.pointerEvents = '';
-
-					if ( intersects.length > 0 ) {
-
-						const object = intersects[ 0 ].object;
-
-						if ( object.name === 'cutout' ) {
-
-							rendererWebGL.domElement.style.pointerEvents = 'none';
-
-						}
-
-					}
-
-				} );
-
 				window.addEventListener( 'resize', onWindowResize );
 
 			}