From 903bb60f209990fe9618459702e5a8d6c303a28b Mon Sep 17 00:00:00 2001
From: Anatoly <akopyl@radner.ru>
Date: Sat, 29 Jan 2022 17:01:19 +0300
Subject: [PATCH] Added a mouse follow animation

---
 src/Mockup.vue     | 16 +++++++++++++++-
 src/MockupModel.js | 10 +++++++++-
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/Mockup.vue b/src/Mockup.vue
index 5021dc3..f2d6626 100644
--- a/src/Mockup.vue
+++ b/src/Mockup.vue
@@ -3,6 +3,7 @@
     ref="container"
     @mouseenter="handleMouseEnter"
     @mouseleave="handleMouseLeave"
+    @mousemove="handleMouseMove"
   />
 </template>
 
@@ -33,6 +34,8 @@ export default {
     let scene;
     let phone;
     let renderer;
+    let mouseX = 0;
+    let mouseY = 0;
 
     function init() {
       const environmentInit = () => {
@@ -141,6 +144,10 @@ export default {
             phone.rotateAnim();
             break;
 
+          case 'lookAt':
+            phone.lookAtAnim(mouseX, mouseY, camera);
+            break;
+
           default:
             phone.floatAnim();
         }
@@ -150,7 +157,7 @@ export default {
     }
 
     function handleMouseEnter() {
-      animation.value = 'rotate';
+      animation.value = 'lookAt';
     }
 
     function handleMouseLeave() {
@@ -158,6 +165,12 @@ export default {
       animation.value = 'float';
     }
 
+    function handleMouseMove(event) {
+      const rect = container.value.getBoundingClientRect();
+      mouseX = event.clientX - rect.left - rect.width / 2;
+      mouseY = -(event.clientY - rect.top - rect.height / 2);
+    }
+
     onMounted(() => {
       init();
       animate();
@@ -168,6 +181,7 @@ export default {
       container,
       handleMouseEnter,
       handleMouseLeave,
+      handleMouseMove,
     };
   },
 };
diff --git a/src/MockupModel.js b/src/MockupModel.js
index da096a8..1570054 100644
--- a/src/MockupModel.js
+++ b/src/MockupModel.js
@@ -1,4 +1,4 @@
-import { Group } from 'three';
+import { Group, Vector3 } from 'three';
 
 export default class MockupModel extends Group {
   constructor() {
@@ -35,4 +35,12 @@ export default class MockupModel extends Group {
   rotateAnim() {
     this.rotation.y += 0.02;
   }
+
+  lookAtAnim(x, y, camera) {
+    const target = new Vector3();
+    target.x = x;
+    target.y = y;
+    target.z = camera.position.z;
+    this.lookAt(target);
+  }
 }