Examples: Use more pointer semantics. (#21504)

examples/webgl_geometry_terrain_raycast.html

@@ -41,7 +41,7 @@
 			let helper;
 
 			const raycaster = new THREE.Raycaster();
-			const mouse = new THREE.Vector2();
+			const pointer = new THREE.Vector2();
 
 			init();
 			animate();
@@ -49,7 +49,7 @@
 			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,7 +39,7 @@
 
 			const pickingData = [];
 
-			const mouse = new THREE.Vector2();
+			const pointer = new THREE.Vector2();
 			const offset = new THREE.Vector3( 10, 10, 10 );
 
 			init();
@@ -47,7 +47,7 @@
 
 			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;

examples/webgl_interactive_voxelpainter.html

@@ -28,7 +28,7 @@
 
 			let camera, scene, renderer;
 			let plane;
-			let mouse, raycaster, isShiftDown = false;
+			let pointer, raycaster, isShiftDown = false;
 
 			let rollOverMesh, rollOverMaterial;
 			let cubeGeo, cubeMaterial;
@@ -67,7 +67,7 @@
 				//
 
 				raycaster = new THREE.Raycaster();
-				mouse = new THREE.Vector2();
+				pointer = new THREE.Vector2();
 
 				const geometry = new THREE.PlaneGeometry( 1000, 1000 );
 				geometry.rotateX( - Math.PI / 2 );
@@ -91,8 +91,8 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
-				document.addEventListener( 'mousemove', onDocumentMouseMove );
-				document.addEventListener( 'mousedown', onDocumentMouseDown );
+				document.addEventListener( 'pointermove', onPointerMove );
+				document.addEventListener( 'pointerdown', onPointerDown );
 				document.addEventListener( 'keydown', onDocumentKeyDown );
 				document.addEventListener( 'keyup', onDocumentKeyUp );
 
@@ -111,13 +111,11 @@
 
 			}
 
-			function onDocumentMouseMove( event ) {
+			function onPointerMove( event ) {
 
-				event.preventDefault();
+				pointer.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1 );
 
-				mouse.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1 );
-
-				raycaster.setFromCamera( mouse, camera );
+				raycaster.setFromCamera( pointer, camera );
 
 				const intersects = raycaster.intersectObjects( objects );
 
@@ -134,13 +132,11 @@
 
 			}
 
-			function onDocumentMouseDown( event ) {
-
-				event.preventDefault();
+			function onPointerDown( event ) {
 
-				mouse.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1 );
+				pointer.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1 );
 
-				raycaster.setFromCamera( mouse, camera );
+				raycaster.setFromCamera( pointer, camera );
 
 				const intersects = raycaster.intersectObjects( objects );
 

examples/webgl_raycast_sprite.html

@@ -20,6 +20,7 @@
 	<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl raycast sprite<br></div>
 
 	<script type="module">
+
 		import * as THREE from '../build/three.module.js';
 
 		import { OrbitControls } from './jsm/controls/OrbitControls.js';
@@ -27,6 +28,10 @@
 		let renderer, scene, camera;
 		let controls, group;
 
+		let selectedObject = null;
+		const raycaster = new THREE.Raycaster();
+		const pointer = new THREE.Vector2();
+
 		init();
 		animate();
 
@@ -81,7 +86,7 @@
 			group2.add( sprite3 );
 
 			window.addEventListener( 'resize', onWindowResize );
-			window.addEventListener( "pointermove", onDocumentMouseMove, false );
+			document.addEventListener( 'pointermove', onPointerMove );
 
 		}
 
@@ -101,11 +106,8 @@
 
 		}
 
-		let selectedObject = null;
-
-		function onDocumentMouseMove( event ) {
+		function onPointerMove( event ) {
 
-			event.preventDefault();
 			if ( selectedObject ) {
 
 				selectedObject.material.color.set( '#69f' );
@@ -113,7 +115,12 @@
 
 			}
 
-			const intersects = getIntersects( event.layerX, event.layerY );
+			pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
+			pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
+
+			raycaster.setFromCamera( pointer, camera );
+
+			const intersects = raycaster.intersectObject( group, true );
 
 			if ( intersects.length > 0 ) {
 
@@ -134,20 +141,6 @@
 
 		}
 
-		const raycaster = new THREE.Raycaster();
-		const mouseVector = new THREE.Vector3();
-
-		function getIntersects( x, y ) {
-
-			x = ( x / window.innerWidth ) * 2 - 1;
-			y = - ( y / window.innerHeight ) * 2 + 1;
-
-			mouseVector.set( x, y, 0.5 );
-			raycaster.setFromCamera( mouseVector, camera );
-
-			return raycaster.intersectObject( group, true );
-
-		}
 	</script>
 </body>
 </html>