Changing animations

src/Mockup.vue

@@ -1,5 +1,9 @@
 <template>
-  <div ref="container" />
+  <div
+    ref="container"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+  />
 </template>
 
 <script>
@@ -7,10 +11,9 @@ import { ref, onMounted } from 'vue';
 
 import * as THREE from 'three';
 import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
+import MockupModel from './MockupModel';
 import phoneObj from './assets/iphone.obj';
 
-import rotateAnimation from './animations/rotate';
-
 export default {
   name: 'Mockup',
   props: {
@@ -24,7 +27,7 @@ export default {
     },
   },
   setup(props) {
-    const idle = ref(true);
+    const animation = ref('float');
     const container = ref(null);
     let camera;
     let scene;
@@ -113,7 +116,10 @@ export default {
           );
         };
 
-        phone = new THREE.Group();
+        phone = new MockupModel();
+        phone.acceleration.y = -0.02;
+        phone.rotation.x = -0.1;
+        phone.rotation.y = 0.5;
         screenInit();
         bodyInit();
       };
@@ -130,20 +136,38 @@ export default {
       requestAnimationFrame(animate);
 
       if (phone) {
-        phone = rotateAnimation(phone);
+        switch (animation.value) {
+          case 'rotate':
+            phone.rotateAnim();
+            break;
+
+          default:
+            phone.floatAnim();
+        }
       }
 
       renderer.render(scene, camera);
     }
 
+    function handleMouseEnter() {
+      animation.value = 'rotate';
+    }
+
+    function handleMouseLeave() {
+      phone.acceleration.y = -0.02;
+      animation.value = 'float';
+    }
+
     onMounted(() => {
       init();
       animate();
     });
 
     return {
-      idle,
+      animation,
       container,
+      handleMouseEnter,
+      handleMouseLeave,
     };
   },
 };

src/MockupModel.js

@@ -0,0 +1,38 @@
+import { Group } from 'three';
+
+export default class MockupModel extends Group {
+  constructor() {
+    super();
+
+    this.speed = {
+      x: 0,
+      y: 0,
+      z: 0,
+    };
+
+    this.acceleration = {
+      x: 0,
+      y: 0,
+      z: 0,
+    };
+  }
+
+  floatAnim() {
+    const maxSpeed = 0.5;
+
+    if (this.position.y < -2) {
+      this.acceleration.y = 0.02;
+    }
+
+    if (this.position.y > 2) {
+      this.acceleration.y = -0.02;
+    }
+
+    this.speed.y = Math.min(this.speed.y + this.acceleration.y, maxSpeed);
+    this.position.y += this.speed.y;
+  }
+
+  rotateAnim() {
+    this.rotation.y += 0.02;
+  }
+}

src/animations/rotate.js

@@ -1,4 +0,0 @@
-export default function idleAnimation(phone) {
-  phone.rotation.y += 0.02;
-  return phone;
-}