Examples: More usage of pointer events and terminology.

examples/misc_boxselection.html

@@ -9,6 +9,7 @@
 			body {
 				background-color: #f0f0f0;
 				color: #000;
+				touch-action: none;
 			}
 
 			a {
@@ -138,7 +139,7 @@
 			var selectionBox = new SelectionBox( camera, scene );
 			var helper = new SelectionHelper( selectionBox, renderer, 'selectBox' );
 
-			document.addEventListener( 'mousedown', function ( event ) {
+			document.addEventListener( 'pointerdown', function ( event ) {
 
 				for ( var item of selectionBox.collection ) {
 
@@ -153,7 +154,7 @@
 
 			} );
 
-			document.addEventListener( 'mousemove', function ( event ) {
+			document.addEventListener( 'pointermove', function ( event ) {
 
 				if ( helper.isDown ) {
 
@@ -180,7 +181,7 @@
 
 			} );
 
-			document.addEventListener( 'mouseup', function ( event ) {
+			document.addEventListener( 'pointerup', function ( event ) {
 
 				selectionBox.endPoint.set(
 					( event.clientX / window.innerWidth ) * 2 - 1,

examples/webgl_geometry_nurbs.html

@@ -35,10 +35,10 @@
 			var group;
 
 			var targetRotation = 0;
-			var targetRotationOnMouseDown = 0;
+			var targetRotationOnPointerDown = 0;
 
-			var mouseX = 0;
-			var mouseXOnMouseDown = 0;
+			var pointerX = 0;
+			var pointerXOnPointerDown = 0;
 
 			var windowHalfX = window.innerWidth / 2;
 
@@ -195,8 +195,8 @@
 
 				if ( event.isPrimary === false ) return;
 
-				mouseXOnMouseDown = event.clientX - windowHalfX;
-				targetRotationOnMouseDown = targetRotation;
+				pointerXOnPointerDown = event.clientX - windowHalfX;
+				targetRotationOnPointerDown = targetRotation;
 
 				document.addEventListener( 'pointermove', onPointerMove, false );
 				document.addEventListener( 'pointerup', onPointerUp, false );
@@ -207,9 +207,9 @@
 
 				if ( event.isPrimary === false ) return;
 
-				mouseX = event.clientX - windowHalfX;
+				pointerX = event.clientX - windowHalfX;
 
-				targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
+				targetRotation = targetRotationOnPointerDown + ( pointerX - pointerXOnPointerDown ) * 0.02;
 
 			}
 

examples/webgl_geometry_shapes.html

@@ -29,10 +29,10 @@
 			var group;
 
 			var targetRotation = 0;
-			var targetRotationOnMouseDown = 0;
+			var targetRotationOnPointerDown = 0;
 
-			var mouseX = 0;
-			var mouseXOnMouseDown = 0;
+			var pointerX = 0;
+			var pointerXOnPointerDown = 0;
 
 			var windowHalfX = window.innerWidth / 2;
 
@@ -380,8 +380,8 @@
 
 				if ( event.isPrimary === false ) return;
 
-				mouseXOnMouseDown = event.clientX - windowHalfX;
-				targetRotationOnMouseDown = targetRotation;
+				pointerXOnPointerDown = event.clientX - windowHalfX;
+				targetRotationOnPointerDown = targetRotation;
 
 				document.addEventListener( 'pointermove', onPointerMove, false );
 				document.addEventListener( 'pointerup', onPointerUp, false );
@@ -392,9 +392,9 @@
 
 				if ( event.isPrimary === false ) return;
 
-				mouseX = event.clientX - windowHalfX;
+				pointerX = event.clientX - windowHalfX;
 
-				targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
+				targetRotation = targetRotationOnPointerDown + ( pointerX - pointerXOnPointerDown ) * 0.02;
 
 			}
 

examples/webgl_geometry_text.html

@@ -77,10 +77,10 @@
 			for ( var i in weightMap ) reverseWeightMap[ weightMap[ i ] ] = i;
 
 			var targetRotation = 0;
-			var targetRotationOnMouseDown = 0;
+			var targetRotationOnPointerDown = 0;
 
-			var mouseX = 0;
-			var mouseXOnMouseDown = 0;
+			var pointerX = 0;
+			var pointerXOnPointerDown = 0;
 
 			var windowHalfX = window.innerWidth / 2;
 
@@ -448,8 +448,8 @@
 
 				if ( event.isPrimary === false ) return;
 
-				mouseXOnMouseDown = event.clientX - windowHalfX;
-				targetRotationOnMouseDown = targetRotation;
+				pointerXOnPointerDown = event.clientX - windowHalfX;
+				targetRotationOnPointerDown = targetRotation;
 
 				document.addEventListener( 'pointermove', onPointerMove, false );
 				document.addEventListener( 'pointerup', onPointerUp, false );
@@ -460,9 +460,9 @@
 
 				if ( event.isPrimary === false ) return;
 
-				mouseX = event.clientX - windowHalfX;
+				pointerX = event.clientX - windowHalfX;
 
-				targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
+				targetRotation = targetRotationOnPointerDown + ( pointerX - pointerXOnPointerDown ) * 0.02;
 
 			}
 

examples/webgl_loader_ttf.html

@@ -35,10 +35,10 @@
 			var mirror = true;
 
 			var targetRotation = 0;
-			var targetRotationOnMouseDown = 0;
+			var targetRotationOnPointerDown = 0;
 
-			var mouseX = 0;
-			var mouseXOnMouseDown = 0;
+			var pointerX = 0;
+			var pointerXOnPointerDown = 0;
 
 			var windowHalfX = window.innerWidth / 2;
 
@@ -239,8 +239,8 @@
 
 				if ( event.isPrimary === false ) return;
 
-				mouseXOnMouseDown = event.clientX - windowHalfX;
-				targetRotationOnMouseDown = targetRotation;
+				pointerXOnPointerDown = event.clientX - windowHalfX;
+				targetRotationOnPointerDown = targetRotation;
 
 				document.addEventListener( 'pointermove', onPointerMove, false );
 				document.addEventListener( 'pointerup', onPointerUp, false );
@@ -251,9 +251,9 @@
 
 				if ( event.isPrimary === false ) return;
 
-				mouseX = event.clientX - windowHalfX;
+				pointerX = event.clientX - windowHalfX;
 
-				targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
+				targetRotation = targetRotationOnPointerDown + ( pointerX - pointerXOnPointerDown ) * 0.02;
 
 			}
 

examples/webgl_materials_cubemap_dynamic.html

@@ -5,6 +5,11 @@
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<link type="text/css" rel="stylesheet" href="main.css">
+		<style>
+			body {
+				touch-action: none;
+			}
+		</style>
 	</head>
 	<body>
 
@@ -88,7 +93,7 @@
 
 				//
 
-				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
+				document.addEventListener( 'pointerdown', onPointerDown, false );
 				document.addEventListener( 'wheel', onDocumentMouseWheel, false );
 
 				window.addEventListener( 'resize', onWindowResized, false );
@@ -104,7 +109,7 @@
 
 			}
 
-			function onDocumentMouseDown( event ) {
+			function onPointerDown( event ) {
 
 				event.preventDefault();
 
@@ -114,22 +119,22 @@
 				onPointerDownLon = lon;
 				onPointerDownLat = lat;
 
-				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 ) {
 
 				lon = ( event.clientX - onPointerDownPointerX ) * 0.1 + onPointerDownLon;
 				lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;
 
 			}
 
-			function onDocumentMouseUp() {
+			function onPointerUp() {
 
-				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
-				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
+				document.removeEventListener( 'pointermove', onPointerMove, false );
+				document.removeEventListener( 'pointerup', onPointerUp, false );
 
 			}
 

examples/webgl_materials_texture_canvas.html

@@ -13,6 +13,7 @@
 				right: 0px;
 				z-index: 3000;
 				cursor: crosshair;
+				touch-action: none;
 			}
 		</style>
 	</head>
@@ -79,26 +80,26 @@
 				var paint = false;
 
 				// add canvas event listeners
-				drawingCanvas.addEventListener( 'mousedown', function ( e ) {
+				drawingCanvas.addEventListener( 'pointerdown', function ( e ) {
 
 					paint = true;
 					drawStartPos.set( e.offsetX, e.offsetY );
 
 				} );
 
-				drawingCanvas.addEventListener( 'mousemove', function ( e ) {
+				drawingCanvas.addEventListener( 'pointermove', function ( e ) {
 
 					if ( paint ) draw( drawingContext, e.offsetX, e.offsetY );
 
 				} );
 
-				drawingCanvas.addEventListener( 'mouseup', function () {
+				drawingCanvas.addEventListener( 'pointerup', function () {
 
 					paint = false;
 
 				} );
 
-				drawingCanvas.addEventListener( 'mouseleave', function () {
+				drawingCanvas.addEventListener( 'pointerleave', function () {
 
 					paint = false;
 

examples/webgl_panorama_equirectangular.html

@@ -21,9 +21,9 @@
 			var camera, scene, renderer;
 
 			var isUserInteracting = false,
-				onMouseDownMouseX = 0, onMouseDownMouseY = 0,
-				lon = 0, onMouseDownLon = 0,
-				lat = 0, onMouseDownLat = 0,
+				onPointerDownMouseX = 0, onPointerDownMouseY = 0,
+				lon = 0, onPointerDownLon = 0,
+				lat = 0, onPointerDownLat = 0,
 				phi = 0, theta = 0;
 
 			init();
@@ -120,11 +120,11 @@
 
 				isUserInteracting = true;
 
-				onMouseDownMouseX = event.clientX;
-				onMouseDownMouseY = event.clientY;
+				onPointerDownMouseX = event.clientX;
+				onPointerDownMouseY = event.clientY;
 
-				onMouseDownLon = lon;
-				onMouseDownLat = lat;
+				onPointerDownLon = lon;
+				onPointerDownLat = lat;
 
 				document.addEventListener( 'pointermove', onPointerMove, false );
 				document.addEventListener( 'pointerup', onPointerUp, false );
@@ -135,8 +135,8 @@
 
 				if ( event.isPrimary === false ) return;
 
-				lon = ( onMouseDownMouseX - event.clientX ) * 0.1 + onMouseDownLon;
-				lat = ( event.clientY - onMouseDownMouseY ) * 0.1 + onMouseDownLat;
+				lon = ( onPointerDownMouseX - event.clientX ) * 0.1 + onPointerDownLon;
+				lat = ( event.clientY - onPointerDownMouseY ) * 0.1 + onPointerDownLat;
 
 			}
 

examples/webgl_video_panorama_equirectangular.html

@@ -5,6 +5,11 @@
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<link type="text/css" rel="stylesheet" href="main.css">
+		<style>
+			body {
+				touch-action: none;
+			}
+		</style>
 	</head>
 	<body>
 		<div id="info">
@@ -66,10 +71,9 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
-				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
-				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
-				document.addEventListener( 'wheel', onDocumentMouseWheel, false );
+				document.addEventListener( 'pointerdown', onPointerDown, false );
+				document.addEventListener( 'pointermove', onPointerMove, false );
+				document.addEventListener( 'pointerup', onPointerUp, false );
 
 				//
 
@@ -86,9 +90,7 @@
 
 			}
 
-			function onDocumentMouseDown( event ) {
-
-				event.preventDefault();
+			function onPointerDown( event ) {
 
 				isUserInteracting = true;
 
@@ -100,7 +102,7 @@
 
 			}
 
-			function onDocumentMouseMove( event ) {
+			function onPointerMove( event ) {
 
 				if ( isUserInteracting === true ) {
 
@@ -111,20 +113,12 @@
 
 			}
 
-			function onDocumentMouseUp() {
+			function onPointerUp() {
 
 				isUserInteracting = false;
 
 			}
 
-			function onDocumentMouseWheel( event ) {
-
-				distance += event.deltaY * 0.05;
-
-				distance = THREE.MathUtils.clamp( distance, 1, 50 );
-
-			}
-
 			function animate() {
 
 				requestAnimationFrame( animate );