Examples: Use more pointer semantics. (#21504)

examples/webgl_geometry_terrain_raycast.html

@@ -41,15 +41,15 @@
 			let helper;
 
 			const raycaster = new THREE.Raycaster();
-			const mouse = new THREE.Vector2();
+			const pointer = new THREE.Vector2();
 
 			init();
 			animate();
 
 			function init() {
 
 				container = document.getElementById( 'container' );
-				container.innerHTML = "";
+				container.innerHTML = '';
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
@@ -103,7 +103,7 @@
 				helper = new THREE.Mesh( geometryHelper, new THREE.MeshNormalMaterial() );
 				scene.add( helper );
 
-				container.addEventListener( 'pointermove', onMouseMove );
+				container.addEventListener( 'pointermove', onPointerMove );
 
 				stats = new Stats();
 				container.appendChild( stats.dom );
@@ -232,11 +232,11 @@
 
 			}
 
-			function onMouseMove( event ) {
+			function onPointerMove( event ) {
 
-				mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
-				mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
-				raycaster.setFromCamera( mouse, camera );
+				pointer.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
+				pointer.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
+				raycaster.setFromCamera( pointer, camera );
 
 				// See if the ray from the camera into the world hits one of our meshes
 				const intersects = raycaster.intersectObject( mesh );

examples/webgl_interactive_buffergeometry.html

@@ -21,7 +21,7 @@
 
 			let camera, scene, renderer;
 
-			let raycaster, mouse;
+			let raycaster, pointer;
 
 			let mesh, line;
 
@@ -175,7 +175,7 @@
 
 				raycaster = new THREE.Raycaster();
 
-				mouse = new THREE.Vector2();
+				pointer = new THREE.Vector2();
 
 				geometry = new THREE.BufferGeometry();
 				geometry.setAttribute( 'position', new THREE.BufferAttribute( new Float32Array( 4 * 3 ), 3 ) );
@@ -200,7 +200,7 @@
 				//
 
 				window.addEventListener( 'resize', onWindowResize );
-				document.addEventListener( 'mousemove', onDocumentMouseMove );
+				document.addEventListener( 'pointermove', onPointerMove );
 
 			}
 
@@ -213,12 +213,10 @@
 
 			}
 
-			function onDocumentMouseMove( event ) {
+			function onPointerMove( event ) {
 
-				event.preventDefault();
-
-				mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
-				mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
+				pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
+				pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
 
 			}
 
@@ -240,7 +238,7 @@
 				mesh.rotation.x = time * 0.15;
 				mesh.rotation.y = time * 0.25;
 
-				raycaster.setFromCamera( mouse, camera );
+				raycaster.setFromCamera( pointer, camera );
 
 				const intersects = raycaster.intersectObject( mesh );
 

examples/webgl_interactive_cubes.html

@@ -33,7 +33,7 @@
 			let INTERSECTED;
 			let theta = 0;
 
-			const mouse = new THREE.Vector2();
+			const pointer = new THREE.Vector2();
 			const radius = 100;
 
 			init();
@@ -85,7 +85,7 @@
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				document.addEventListener( 'mousemove', onDocumentMouseMove );
+				document.addEventListener( 'mousemove', onPointerMove );
 
 				//
 
@@ -102,12 +102,10 @@
 
 			}
 
-			function onDocumentMouseMove( event ) {
+			function onPointerMove( event ) {
 
-				event.preventDefault();
-
-				mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
-				mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
+				pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
+				pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
 
 			}
 
@@ -135,7 +133,7 @@
 
 				// find intersections
 
-				raycaster.setFromCamera( mouse, camera );
+				raycaster.setFromCamera( pointer, camera );
 
 				const intersects = raycaster.intersectObjects( scene.children );
 

examples/webgl_interactive_cubes_gpu.html

@@ -39,15 +39,15 @@
 
 			const pickingData = [];
 
-			const mouse = new THREE.Vector2();
+			const pointer = new THREE.Vector2();
 			const offset = new THREE.Vector3( 10, 10, 10 );
 
 			init();
 			animate();
 
 			function init() {
 
-				container = document.getElementById( "container" );
+				container = document.getElementById( 'container' );
 
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 1000;
@@ -165,18 +165,16 @@
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				renderer.domElement.addEventListener( 'pointermove', onMouseMove, false );
+				renderer.domElement.addEventListener( 'pointermove', onPointerMove );
 
 			}
 
 			//
 
-			function onMouseMove( e ) {
+			function onPointerMove( e ) {
 
-				e.preventDefault();
-
-				mouse.x = e.clientX;
-				mouse.y = e.clientY;
+				pointer.x = e.clientX;
+				pointer.y = e.clientY;
 
 			}
 
@@ -195,7 +193,7 @@
 
 				// set the view offset to represent just a single pixel under the mouse
 
-				camera.setViewOffset( renderer.domElement.width, renderer.domElement.height, mouse.x * window.devicePixelRatio | 0, mouse.y * window.devicePixelRatio | 0, 1, 1 );
+				camera.setViewOffset( renderer.domElement.width, renderer.domElement.height, pointer.x * window.devicePixelRatio | 0, pointer.y * window.devicePixelRatio | 0, 1, 1 );
 
 				// render the scene
 

examples/webgl_interactive_cubes_ortho.html

@@ -33,7 +33,7 @@
 			let theta = 0;
 			let INTERSECTED;
 
-			const mouse = new THREE.Vector2();
+			const pointer = new THREE.Vector2();
 			const radius = 500;
 			const frustumSize = 1000;
 
@@ -87,7 +87,7 @@
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				document.addEventListener( 'mousemove', onDocumentMouseMove );
+				document.addEventListener( 'pointermove', onPointerMove );
 
 				//
 
@@ -110,12 +110,10 @@
 
 			}
 
-			function onDocumentMouseMove( event ) {
+			function onPointerMove( event ) {
 
-				event.preventDefault();
-
-				mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
-				mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
+				pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
+				pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
 
 			}
 
@@ -143,7 +141,7 @@
 
 				// find intersections
 
-				raycaster.setFromCamera( mouse, camera );
+				raycaster.setFromCamera( pointer, camera );
 
 				const intersects = raycaster.intersectObjects( scene.children );
 

examples/webgl_interactive_lines.html

@@ -26,7 +26,7 @@
 			let container, stats;
 			let camera, scene, raycaster, renderer, parentTransform, sphereInter;
 
-			const mouse = new THREE.Vector2();
+			const pointer = new THREE.Vector2();
 			const radius = 100;
 			let theta = 0;
 
@@ -136,7 +136,7 @@
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				document.addEventListener( 'mousemove', onDocumentMouseMove );
+				document.addEventListener( 'pointermove', onPointerMove );
 
 				//
 
@@ -153,12 +153,10 @@
 
 			}
 
-			function onDocumentMouseMove( event ) {
+			function onPointerMove( event ) {
 
-				event.preventDefault();
-
-				mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
-				mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
+				pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
+				pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
 
 			}
 
@@ -186,7 +184,7 @@
 
 				// find intersections
 
-				raycaster.setFromCamera( mouse, camera );
+				raycaster.setFromCamera( pointer, camera );
 
 				const intersects = raycaster.intersectObjects( parentTransform.children, true );
 

examples/webgl_interactive_points.html

@@ -66,7 +66,7 @@
 			const PARTICLE_SIZE = 20;
 
 			let raycaster, intersects;
-			let mouse, INTERSECTED;
+			let pointer, INTERSECTED;
 
 			init();
 			animate();
@@ -144,7 +144,7 @@
 				//
 
 				raycaster = new THREE.Raycaster();
-				mouse = new THREE.Vector2();
+				pointer = new THREE.Vector2();
 
 				//
 
@@ -154,16 +154,14 @@
 				//
 
 				window.addEventListener( 'resize', onWindowResize );
-				document.addEventListener( 'mousemove', onDocumentMouseMove );
+				document.addEventListener( 'pointermove', onPointerMove );
 
 			}
 
-			function onDocumentMouseMove( event ) {
+			function onPointerMove( event ) {
 
-				event.preventDefault();
-
-				mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
-				mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
+				pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
+				pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
 
 			}
 
@@ -193,7 +191,7 @@
 				const geometry = particles.geometry;
 				const attributes = geometry.attributes;
 
-				raycaster.setFromCamera( mouse, camera );
+				raycaster.setFromCamera( pointer, camera );
 
 				intersects = raycaster.intersectObject( particles );
 

examples/webgl_interactive_raycasting_points.html

@@ -25,7 +25,7 @@
 			let clock;
 			let toggle = 0;
 
-			const mouse = new THREE.Vector2();
+			const pointer = new THREE.Vector2();
 			const spheres = [];
 
 			const threshold = 0.1;
@@ -209,16 +209,14 @@
 				//
 
 				window.addEventListener( 'resize', onWindowResize );
-				document.addEventListener( 'mousemove', onDocumentMouseMove );
+				document.addEventListener( 'pointermove', onPointerMove );
 
 			}
 
-			function onDocumentMouseMove( event ) {
+			function onPointerMove( event ) {
 
-				event.preventDefault();
-
-				mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
-				mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
+				pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
+				pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
 
 			}
 
@@ -245,7 +243,7 @@
 				camera.applyMatrix4( rotateY );
 				camera.updateMatrixWorld();
 
-				raycaster.setFromCamera( mouse, camera );
+				raycaster.setFromCamera( pointer, camera );
 
 				const intersections = raycaster.intersectObjects( pointclouds );
 				intersection = ( intersections.length ) > 0 ? intersections[ 0 ] : null;