Examples: Replaced all touch events usage.

mrdoob · on Sep 1, 2020 · 0a1131fb92cf54c6ac05e1a39bd2c71efe07faeb · 0a1131f
1 parent 3f1cf4e
commit 0a1131fb92cf54c6ac05e1a39bd2c71efe07faeb
diff --git a/examples/css3d_panorama.html b/examples/css3d_panorama.html
@@ -21,7 +21,7 @@
 			var lon = 90, lat = 0;
 			var phi = 0, theta = 0;
 
-			var touchX, touchY;
+			var pointerX, pointerY;
 
 			init();
 			animate();
@@ -70,6 +70,7 @@
 					var side = sides[ i ];
 
 					var element = document.createElement( 'img' );
+					element.draggable = false;
 					element.width = 1026; // 2 pixels extra to close the gap.
 					element.src = side.url;
 
@@ -86,11 +87,10 @@
 
 				//
 
-				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
-				document.addEventListener( 'wheel', onDocumentMouseWheel, false );
+				document.body.style.touchAction = 'none';
+				document.body.addEventListener( 'pointerdown', onPointerDown, false );
 
-				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
-				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
+				document.addEventListener( 'wheel', onDocumentMouseWheel, false );
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
@@ -105,29 +105,36 @@
 
 			}
 
-			function onDocumentMouseDown( event ) {
+			function onPointerDown( event ) {
+
+				if ( event.isPrimary === false ) return;
 
-				event.preventDefault();
+				pointerX = event.clientX;
+				pointerY = event.clientY;
 
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
-				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
+				document.addEventListener( 'pointermove', onPointerMove, false );
+				document.addEventListener( 'pointerup', onPointerUp, false );
 
 			}
 
-			function onDocumentMouseMove( event ) {
+			function onPointerMove( event ) {
 
-				var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
-				var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;
+				if ( event.isPrimary === false ) return;
 
-				lon -= movementX * 0.1;
-				lat += movementY * 0.1;
+				lon -= ( event.clientX - pointerX ) * 0.1;
+				lat += ( event.clientY - pointerY ) * 0.1;
+
+				pointerX = event.clientX;
+				pointerY = event.clientY;
 
 			}
 
-			function onDocumentMouseUp() {
+			function onPointerUp() {
+
+				if ( event.isPrimary === false ) return;
 
-				document.removeEventListener( 'mousemove', onDocumentMouseMove );
-				document.removeEventListener( 'mouseup', onDocumentMouseUp );
+				document.removeEventListener( 'pointermove', onPointerMove );
+				document.removeEventListener( 'pointerup', onPointerUp );
 
 			}
 
@@ -141,31 +148,6 @@
 
 			}
 
-			function onDocumentTouchStart( event ) {
-
-				event.preventDefault();
-
-				var touch = event.touches[ 0 ];
-
-				touchX = touch.screenX;
-				touchY = touch.screenY;
-
-			}
-
-			function onDocumentTouchMove( event ) {
-
-				event.preventDefault();
-
-				var touch = event.touches[ 0 ];
-
-				lon -= ( touch.screenX - touchX ) * 0.1;
-				lat += ( touch.screenY - touchY ) * 0.1;
-
-				touchX = touch.screenX;
-				touchY = touch.screenY;
-
-			}
-
 			function animate() {
 
 				requestAnimationFrame( animate );

diff --git a/examples/screenshots/webgl_points_billboards.jpg b/examples/screenshots/webgl_points_billboards.jpg
diff --git a/examples/screenshots/webgl_points_waves.jpg b/examples/screenshots/webgl_points_waves.jpg
diff --git a/examples/webgl_geometry_nurbs.html b/examples/webgl_geometry_nurbs.html
@@ -169,9 +169,8 @@
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
-				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
-				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
+				container.style.touchAction = 'none';
+				container.addEventListener( 'pointerdown', onPointerDown, false );
 
 				//
 
@@ -192,66 +191,34 @@
 
 			//
 
-			function onDocumentMouseDown( event ) {
+			function onPointerDown( event ) {
 
-				event.preventDefault();
-
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
-				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
-				document.addEventListener( 'mouseout', onDocumentMouseOut, false );
+				if ( event.isPrimary === false ) return;
 
 				mouseXOnMouseDown = event.clientX - windowHalfX;
 				targetRotationOnMouseDown = targetRotation;
 
-			}
-
-			function onDocumentMouseMove( event ) {
-
-				mouseX = event.clientX - windowHalfX;
-
-				targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
-
-			}
-
-			function onDocumentMouseUp() {
-
-				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
-				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
-				document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
+				document.addEventListener( 'pointermove', onPointerMove, false );
+				document.addEventListener( 'pointerup', onPointerUp, false );
 
 			}
 
-			function onDocumentMouseOut() {
+			function onPointerMove( event ) {
 
-				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
-				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
-				document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
+				if ( event.isPrimary === false ) return;
 
-			}
-
-			function onDocumentTouchStart( event ) {
-
-				if ( event.touches.length == 1 ) {
-
-					event.preventDefault();
-
-					mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
-					targetRotationOnMouseDown = targetRotation;
+				mouseX = event.clientX - windowHalfX;
 
-				}
+				targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
 
 			}
 
-			function onDocumentTouchMove( event ) {
-
-				if ( event.touches.length == 1 ) {
+			function onPointerUp() {
 
-					event.preventDefault();
+				if ( event.isPrimary === false ) return;
 
-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
-					targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
-
-				}
+				document.removeEventListener( 'pointermove', onPointerMove );
+				document.removeEventListener( 'pointerup', onPointerUp );
 
 			}
 

diff --git a/examples/webgl_geometry_shapes.html b/examples/webgl_geometry_shapes.html
@@ -354,9 +354,8 @@
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
-				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
-				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
+				container.style.touchAction = 'none';
+				container.addEventListener( 'pointerdown', onPointerDown, false );
 
 				//
 
@@ -366,6 +365,8 @@
 
 			function onWindowResize() {
 
+				windowHalfX = window.innerWidth / 2;
+
 				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();
 
@@ -375,66 +376,34 @@
 
 			//
 
-			function onDocumentMouseDown( event ) {
-
-				event.preventDefault();
+			function onPointerDown( event ) {
 
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
-				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
-				document.addEventListener( 'mouseout', onDocumentMouseOut, false );
+				if ( event.isPrimary === false ) return;
 
 				mouseXOnMouseDown = event.clientX - windowHalfX;
 				targetRotationOnMouseDown = targetRotation;
 
-			}
-
-			function onDocumentMouseMove( event ) {
-
-				mouseX = event.clientX - windowHalfX;
-
-				targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
-
-			}
-
-			function onDocumentMouseUp() {
-
-				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
-				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
-				document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
+				document.addEventListener( 'pointermove', onPointerMove, false );
+				document.addEventListener( 'pointerup', onPointerUp, false );
 
 			}
 
-			function onDocumentMouseOut() {
+			function onPointerMove( event ) {
 
-				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
-				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
-				document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
+				if ( event.isPrimary === false ) return;
 
-			}
-
-			function onDocumentTouchStart( event ) {
-
-				if ( event.touches.length == 1 ) {
-
-					event.preventDefault();
-
-					mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
-					targetRotationOnMouseDown = targetRotation;
+				mouseX = event.clientX - windowHalfX;
 
-				}
+				targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
 
 			}
 
-			function onDocumentTouchMove( event ) {
-
-				if ( event.touches.length == 1 ) {
+			function onPointerUp() {
 
-					event.preventDefault();
+				if ( event.isPrimary === false ) return;
 
-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
-					targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
-
-				}
+				document.removeEventListener( 'pointermove', onPointerMove );
+				document.removeEventListener( 'pointerup', onPointerUp );
 
 			}
 

diff --git a/examples/webgl_geometry_text.html b/examples/webgl_geometry_text.html
@@ -192,9 +192,9 @@
 
 				// EVENTS
 
-				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
-				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
-				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
+				container.style.touchAction = 'none';
+				container.addEventListener( 'pointerdown', onPointerDown, false );
+
 				document.addEventListener( 'keypress', onDocumentKeyPress, false );
 				document.addEventListener( 'keydown', onDocumentKeyDown, false );
 
@@ -444,66 +444,34 @@
 
 			}
 
-			function onDocumentMouseDown( event ) {
-
-				event.preventDefault();
+			function onPointerDown( event ) {
 
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
-				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
-				document.addEventListener( 'mouseout', onDocumentMouseOut, false );
+				if ( event.isPrimary === false ) return;
 
 				mouseXOnMouseDown = event.clientX - windowHalfX;
 				targetRotationOnMouseDown = targetRotation;
 
-			}
-
-			function onDocumentMouseMove( event ) {
-
-				mouseX = event.clientX - windowHalfX;
-
-				targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
-
-			}
-
-			function onDocumentMouseUp() {
-
-				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
-				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
-				document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
+				document.addEventListener( 'pointermove', onPointerMove, false );
+				document.addEventListener( 'pointerup', onPointerUp, false );
 
 			}
 
-			function onDocumentMouseOut() {
+			function onPointerMove( event ) {
 
-				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
-				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
-				document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
+				if ( event.isPrimary === false ) return;
 
-			}
-
-			function onDocumentTouchStart( event ) {
-
-				if ( event.touches.length == 1 ) {
-
-					event.preventDefault();
-
-					mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
-					targetRotationOnMouseDown = targetRotation;
+				mouseX = event.clientX - windowHalfX;
 
-				}
+				targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
 
 			}
 
-			function onDocumentTouchMove( event ) {
-
-				if ( event.touches.length == 1 ) {
+			function onPointerUp() {
 
-					event.preventDefault();
-
-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
-					targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
+				if ( event.isPrimary === false ) return;
 
-				}
+				document.removeEventListener( 'pointermove', onPointerMove );
+				document.removeEventListener( 'pointerup', onPointerUp );
 
 			}