Home position and smooth return

src/Mockup.vue

@@ -28,7 +28,7 @@ export default {
     },
   },
   setup(props) {
-    const animation = ref('float');
+    const animation = ref('home');
     const container = ref(null);
     let camera;
     let scene;
@@ -126,10 +126,19 @@ export default {
           );
         };
 
-        phone = new MockupModel();
+        phone = new MockupModel({
+          position: {
+            x: 0,
+            y: 0,
+            z: 0,
+          },
+          rotation: {
+            x: -0.2,
+            y: 0.3,
+            z: 0.06,
+          },
+        });
         phone.acceleration.y = -0.01;
-        phone.rotation.x = -0.1;
-        phone.rotation.y = 0.5;
         scene.add(phone);
         screenInit();
         bodyInit();
@@ -157,6 +166,13 @@ export default {
             phone.lookAtAnim(mouseX / 3, mouseY / 3, camera.position.z);
             break;
 
+          case 'home':
+            if (phone.homeAnim()) {
+              phone.acceleration.y = -0.01;
+              animation.value = 'float';
+            }
+            break;
+
           default:
             phone.floatAnim();
         }
@@ -170,8 +186,8 @@ export default {
     }
 
     function handleMouseLeave() {
-      phone.acceleration.y = -0.01;
-      animation.value = 'float';
+      // phone.acceleration.y = -0.01;
+      animation.value = 'home';
     }
 
     function handleMouseMove(event) {

src/MockupModel.js

@@ -1,21 +1,12 @@
 import { Group, Vector3 } from 'three';
 
 export default class MockupModel extends Group {
-  constructor() {
+  constructor(home) {
     super();
 
-    this.home = {
-      position: {
-        x: 0,
-        y: 0,
-        z: 0,
-      },
-      rotation: {
-        x: 0,
-        y: 0,
-        z: 0,
-      },
-    };
+    this.goingHome = false;
+
+    this.home = home;
 
     this.speed = {
       x: 0,
@@ -23,6 +14,12 @@ export default class MockupModel extends Group {
       z: 0,
     };
 
+    this.rotSpeed = {
+      x: 0,
+      y: 0,
+      z: 0,
+    };
+
     this.acceleration = {
       x: 0,
       y: 0,
@@ -30,6 +27,35 @@ export default class MockupModel extends Group {
     };
   }
 
+  homeAnim() {
+    if (!this.goingHome) {
+      this.goingHome = true;
+
+      const rT = 10;
+      this.speed.x = (this.home.position.x - this.position.x) / rT;
+      this.speed.y = (this.home.position.y - this.position.y) / rT;
+      this.speed.z = (this.home.position.z - this.position.z) / rT;
+
+      this.rotSpeed.x = (this.home.rotation.x - this.rotation.x) / rT;
+      this.rotSpeed.y = (this.home.rotation.y - this.rotation.y) / rT;
+      this.rotSpeed.z = (this.home.rotation.z - this.rotation.z) / rT;
+
+      setTimeout(() => {
+        this.goingHome = false;
+      }, rT);
+    }
+
+    this.position.x += this.speed.x;
+    this.position.y += this.speed.y;
+    this.position.z += this.speed.z;
+
+    this.rotation.x += this.rotSpeed.x;
+    this.rotation.y += this.rotSpeed.y;
+    this.rotation.z += this.rotSpeed.z;
+
+    return !this.goingHome;
+  }
+
   floatAnim() {
     const maxSpeed = 0.1;
     const acceleration = 0.01;