use pointer events for game

threejs/lessons/kr/threejs-game.md

@@ -1022,54 +1022,42 @@ class InputManager {
 +      }
 +    };
 +
-+    const checkSides = (e) => {
++    const handleMouseMove = (e) => {
++      e.preventDefault();
++      // this is needed because we call preventDefault();
++      // we also gave the canvas a tabindex so it can
++      // become the focus
++      canvas.focus();
++      window.addEventListener('pointermove', handleMouseMove);
++      window.addEventListener('pointerup', handleMouseUp);
++
 +      for (const {elem, key} of sides) {
 +        let pressed = false;
 +        const rect = elem.getBoundingClientRect();
-+        for (const touch of e.touches) {
-+          const x = touch.clientX;
-+          const y = touch.clientY;
-+          const inRect = x >= rect.left && x < rect.right &&
-+                         y >= rect.top && y < rect.bottom;
-+          if (inRect) {
-+            pressed = true;
-+          }
++        const x = e.clientX;
++        const y = e.clientY;
++        const inRect = x >= rect.left && x < rect.right &&
++                       y >= rect.top && y < rect.bottom;
++        if (inRect) {
++          pressed = true;
 +        }
 +        setKey(key, pressed);
 +      }
 +    };
 +
-+    const uiElem = document.querySelector('#ui');
-+    uiElem.addEventListener('touchstart', (e) => {
-+      e.preventDefault();
-+      checkSides(e);
-+    }, { passive: false });
-+    uiElem.addEventListener('touchmove', (e) => {
-+      e.preventDefault();  // 화면 스크롤 방지
-+      checkSides(e);
-+    }, { passive: false });
-+    uiElem.addEventListener('touchend', () => {
-+      clearKeys();
-+    });
-+
-+    function handleMouseMove(e) {
-+      e.preventDefault();
-+      checkSides({
-+        touches: [e],
-+      });
-+    }
-+
 +    function handleMouseUp() {
 +      clearKeys();
-+      window.removeEventListener('mousemove', handleMouseMove, { passive: false });
-+      window.removeEventListener('mouseup', handleMouseUp);
++      window.removeEventListener('pointermove', handleMouseMove, {passive: false});
++      window.removeEventListener('pointerup', handleMouseUp);
 +    }
 +
-+    uiElem.addEventListener('mousedown', (e) => {
-+      handleMouseMove(e);
-+      window.addEventListener('mousemove', handleMouseMove);
-+      window.addEventListener('mouseup', handleMouseUp);
-+    }, { passive: false });
++    const uiElem = document.querySelector('#ui');
++    uiElem.addEventListener('pointerdown', handleMouseMove, {passive: false});
++
++    uiElem.addEventListener('touchstart', (e) => {
++      // prevent scrolling
++      e.preventDefault();
++    }, {passive: false});
   }
   update() {
     for (const keyState of Object.values(this.keys)) {

threejs/lessons/threejs-game.md

@@ -1190,53 +1190,41 @@ class InputManager {
 +      }
 +    };
 +
-+    const checkSides = (e) => {
++    const handleMouseMove = (e) => {
++      e.preventDefault();
++      // this is needed because we call preventDefault();
++      // we also gave the canvas a tabindex so it can
++      // become the focus
++      canvas.focus();
++      window.addEventListener('pointermove', handleMouseMove);
++      window.addEventListener('pointerup', handleMouseUp);
++
 +      for (const {elem, key} of sides) {
 +        let pressed = false;
 +        const rect = elem.getBoundingClientRect();
-+        for (const touch of e.touches) {
-+          const x = touch.clientX;
-+          const y = touch.clientY;
-+          const inRect = x >= rect.left && x < rect.right &&
-+                         y >= rect.top && y < rect.bottom;
-+          if (inRect) {
-+            pressed = true;
-+          }
++        const x = e.clientX;
++        const y = e.clientY;
++        const inRect = x >= rect.left && x < rect.right &&
++                       y >= rect.top && y < rect.bottom;
++        if (inRect) {
++          pressed = true;
 +        }
 +        setKey(key, pressed);
 +      }
 +    };
 +
-+    const uiElem = document.querySelector('#ui');
-+    uiElem.addEventListener('touchstart', (e) => {
-+      e.preventDefault();
-+      checkSides(e);
-+    }, {passive: false});
-+    uiElem.addEventListener('touchmove', (e) => {
-+      e.preventDefault();  // prevent scroll
-+      checkSides(e);
-+    }, {passive: false});
-+    uiElem.addEventListener('touchend', () => {
-+      clearKeys();
-+    });
-+
-+    function handleMouseMove(e) {
-+      e.preventDefault();
-+      checkSides({
-+        touches: [e],
-+      });
-+    }
-+
 +    function handleMouseUp() {
 +      clearKeys();
-+      window.removeEventListener('mousemove', handleMouseMove, {passive: false});
-+      window.removeEventListener('mouseup', handleMouseUp);
++      window.removeEventListener('pointermove', handleMouseMove, {passive: false});
++      window.removeEventListener('pointerup', handleMouseUp);
 +    }
 +
-+    uiElem.addEventListener('mousedown', (e) => {
-+      handleMouseMove(e);
-+      window.addEventListener('mousemove', handleMouseMove);
-+      window.addEventListener('mouseup', handleMouseUp);
++    const uiElem = document.querySelector('#ui');
++    uiElem.addEventListener('pointerdown', handleMouseMove, {passive: false});
++
++    uiElem.addEventListener('touchstart', (e) => {
++      // prevent scrolling
++      e.preventDefault();
 +    }, {passive: false});
   }
   update() {

threejs/threejs-game-conga-line-w-notes.html

@@ -3,7 +3,7 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
     <title>Three.js - Game w/notes</title>
     <style>
     html {
@@ -301,57 +301,41 @@ function main() {
         }
       };
 
-      const checkSides = (e) => {
+      const handleMouseMove = (e) => {
+        e.preventDefault();
+        // this is needed because we call preventDefault();
+        // we also gave the canvas a tabindex so it can
+        // become the focus
+        canvas.focus();
+        window.addEventListener('pointermove', handleMouseMove);
+        window.addEventListener('pointerup', handleMouseUp);
+
         for (const {elem, key} of sides) {
           let pressed = false;
           const rect = elem.getBoundingClientRect();
-          for (const touch of e.touches) {
-            const x = touch.clientX;
-            const y = touch.clientY;
-            const inRect = x >= rect.left && x < rect.right &&
-                           y >= rect.top && y < rect.bottom;
-            if (inRect) {
-              pressed = true;
-            }
+          const x = e.clientX;
+          const y = e.clientY;
+          const inRect = x >= rect.left && x < rect.right &&
+                         y >= rect.top && y < rect.bottom;
+          if (inRect) {
+            pressed = true;
           }
           setKey(key, pressed);
         }
       };
 
-      const uiElem = document.querySelector('#ui');
-      uiElem.addEventListener('touchstart', (e) => {
-        e.preventDefault();
-        checkSides(e);
-      }, {passive: false});
-      uiElem.addEventListener('touchmove', (e) => {
-        e.preventDefault();  // prevent scroll
-        checkSides(e);
-      }, {passive: false});
-      uiElem.addEventListener('touchend', () => {
-        clearKeys();
-      });
-
-      function handleMouseMove(e) {
-        e.preventDefault();
-        checkSides({
-          touches: [e],
-        });
-      }
-
       function handleMouseUp() {
         clearKeys();
-        window.removeEventListener('mousemove', handleMouseMove, {passive: false});
-        window.removeEventListener('mouseup', handleMouseUp);
+        window.removeEventListener('pointermove', handleMouseMove, {passive: false});
+        window.removeEventListener('pointerup', handleMouseUp);
       }
 
-      uiElem.addEventListener('mousedown', (e) => {
-        // this is needed because we call preventDefault();
-        // we also gave the canvas a tabindex so it can
-        // become the focus
-        canvas.focus();
-        handleMouseMove(e);
-        window.addEventListener('mousemove', handleMouseMove);
-        window.addEventListener('mouseup', handleMouseUp);
+      const uiElem = document.querySelector('#ui');
+      uiElem.addEventListener('pointerdown', handleMouseMove, {passive: false});
+
+      uiElem.addEventListener('touchstart', (e) => {
+        // prevent scrolling
+        e.preventDefault();
       }, {passive: false});
     }
     update() {

threejs/threejs-game-conga-line.html

@@ -301,57 +301,41 @@ function main() {
         }
       };
 
-      const checkSides = (e) => {
+      const handleMouseMove = (e) => {
+        e.preventDefault();
+        // this is needed because we call preventDefault();
+        // we also gave the canvas a tabindex so it can
+        // become the focus
+        canvas.focus();
+        window.addEventListener('pointermove', handleMouseMove);
+        window.addEventListener('pointerup', handleMouseUp);
+
         for (const {elem, key} of sides) {
           let pressed = false;
           const rect = elem.getBoundingClientRect();
-          for (const touch of e.touches) {
-            const x = touch.clientX;
-            const y = touch.clientY;
-            const inRect = x >= rect.left && x < rect.right &&
-                           y >= rect.top && y < rect.bottom;
-            if (inRect) {
-              pressed = true;
-            }
+          const x = e.clientX;
+          const y = e.clientY;
+          const inRect = x >= rect.left && x < rect.right &&
+                         y >= rect.top && y < rect.bottom;
+          if (inRect) {
+            pressed = true;
           }
           setKey(key, pressed);
         }
       };
 
-      const uiElem = document.querySelector('#ui');
-      uiElem.addEventListener('touchstart', (e) => {
-        e.preventDefault();
-        checkSides(e);
-      }, {passive: false});
-      uiElem.addEventListener('touchmove', (e) => {
-        e.preventDefault();  // prevent scroll
-        checkSides(e);
-      }, {passive: false});
-      uiElem.addEventListener('touchend', () => {
-        clearKeys();
-      });
-
-      function handleMouseMove(e) {
-        e.preventDefault();
-        checkSides({
-          touches: [e],
-        });
-      }
-
       function handleMouseUp() {
         clearKeys();
-        window.removeEventListener('mousemove', handleMouseMove, {passive: false});
-        window.removeEventListener('mouseup', handleMouseUp);
+        window.removeEventListener('pointermove', handleMouseMove, {passive: false});
+        window.removeEventListener('pointerup', handleMouseUp);
       }
 
-      uiElem.addEventListener('mousedown', (e) => {
-        // this is needed because we call preventDefault();
-        // we also gave the canvas a tabindex so it can
-        // become the focus
-        canvas.focus();
-        handleMouseMove(e);
-        window.addEventListener('mousemove', handleMouseMove);
-        window.addEventListener('mouseup', handleMouseUp);
+      const uiElem = document.querySelector('#ui');
+      uiElem.addEventListener('pointerdown', handleMouseMove, {passive: false});
+
+      uiElem.addEventListener('touchstart', (e) => {
+        // prevent scrolling
+        e.preventDefault();
       }, {passive: false});
     }
     update() {

threejs/threejs-game-player-input.html

@@ -266,57 +266,41 @@ function main() {
         }
       };
 
-      const checkSides = (e) => {
+      const handleMouseMove = (e) => {
+        e.preventDefault();
+        // this is needed because we call preventDefault();
+        // we also gave the canvas a tabindex so it can
+        // become the focus
+        canvas.focus();
+        window.addEventListener('pointermove', handleMouseMove);
+        window.addEventListener('pointerup', handleMouseUp);
+
         for (const {elem, key} of sides) {
           let pressed = false;
           const rect = elem.getBoundingClientRect();
-          for (const touch of e.touches) {
-            const x = touch.clientX;
-            const y = touch.clientY;
-            const inRect = x >= rect.left && x < rect.right &&
-                           y >= rect.top && y < rect.bottom;
-            if (inRect) {
-              pressed = true;
-            }
+          const x = e.clientX;
+          const y = e.clientY;
+          const inRect = x >= rect.left && x < rect.right &&
+                         y >= rect.top && y < rect.bottom;
+          if (inRect) {
+            pressed = true;
           }
           setKey(key, pressed);
         }
       };
 
-      const uiElem = document.querySelector('#ui');
-      uiElem.addEventListener('touchstart', (e) => {
-        e.preventDefault();
-        checkSides(e);
-      }, {passive: false});
-      uiElem.addEventListener('touchmove', (e) => {
-        e.preventDefault();  // prevent scroll
-        checkSides(e);
-      }, {passive: false});
-      uiElem.addEventListener('touchend', () => {
-        clearKeys();
-      });
-
-      function handleMouseMove(e) {
-        e.preventDefault();
-        checkSides({
-          touches: [e],
-        });
-      }
-
       function handleMouseUp() {
         clearKeys();
-        window.removeEventListener('mousemove', handleMouseMove, {passive: false});
-        window.removeEventListener('mouseup', handleMouseUp);
+        window.removeEventListener('pointermove', handleMouseMove, {passive: false});
+        window.removeEventListener('pointerup', handleMouseUp);
       }
 
-      uiElem.addEventListener('mousedown', (e) => {
-        // this is needed because we call preventDefault();
-        // we also gave the canvas a tabindex so it can
-        // become the focus
-        canvas.focus();
-        handleMouseMove(e);
-        window.addEventListener('mousemove', handleMouseMove);
-        window.addEventListener('mouseup', handleMouseUp);
+      const uiElem = document.querySelector('#ui');
+      uiElem.addEventListener('pointerdown', handleMouseMove, {passive: false});
+
+      uiElem.addEventListener('touchstart', (e) => {
+        // prevent scrolling
+        e.preventDefault();
       }, {passive: false});
     }
     update() {