From 6a6080dfd0080f724a0d662f530f7d4e0542fdce Mon Sep 17 00:00:00 2001
From: Sander Moolin <sandermoolin@gmail.com>
Date: Mon, 22 Mar 2021 15:38:02 -0400
Subject: [PATCH] adding mouse and touch

---
 src/core/Raycaster.js | 27 +++++++++++++++++++++++----
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/core/Raycaster.js b/src/core/Raycaster.js
index 9f18c99..ae4b9a6 100644
--- a/src/core/Raycaster.js
+++ b/src/core/Raycaster.js
@@ -39,10 +39,9 @@ export default {
   },
   setup() {
     const raycaster = new Raycaster();
-    // TODO: change to 'pointer', add event listeners for mousemove and touch
-    const mouse = new Vector2();
+    const pointer = new Vector2();
 
-    return { mouse, raycaster }
+    return { pointer, raycaster }
   },
   data() {
     return {
@@ -62,6 +61,11 @@ export default {
       }
     }
 
+    // add event listeners
+    window.addEventListener('mousemove', this.onMouseMove)
+    window.addEventListener('touchstart', this.onTouchMove)
+    window.addEventListener('touchmove', this.onTouchMove)
+
     // add update method
     this.three.onBeforeRender(this.update)
   },
@@ -81,7 +85,7 @@ export default {
       }
 
       // run standard camera-based raycaster...
-      this.raycaster.setFromCamera(this.mouse, this.raycasterCamera);
+      this.raycaster.setFromCamera(this.pointer, this.raycasterCamera);
       const intersects = this.raycaster.intersectObjects(
         // ...against either our predefined objects or all objects in scene
         this.intersects || scene.children
@@ -124,10 +128,25 @@ export default {
 
       // save internal intersect list
       this._intersects = intersects;
+    },
+    onMouseMove(evt) {
+      this.pointer.x = (evt.offsetX / this.three.size.width) * 2 - 1;
+      this.pointer.y = - (evt.offsetY / this.three.size.height) * 2 + 1;
+    },
+    onTouchMove(evt) {
+      const touch = evt.touches[0]
+      const { top: canvasTop, left: canvasLeft } = touch.target.getBoundingClientRect()
+      this.pointer.x = ((touch.clientX - canvasLeft) / this.three.size.width) * 2 - 1
+      this.pointer.y = -((touch.clientY) / this.three.size.height) * 2 + 1
     }
   },
   render() {
     return this.$slots.default ? this.$slots.default() : [];
   },
+  unmounted() {
+    window.removeEventListener('mousemove', this.onMouseMove)
+    window.removeEventListener('touchstart', this.onTouchMove)
+    window.removeEventListener('touchmove', this.onTouchMove)
+  },
   __hmrId: 'Raycaster',
 };