feat: improve animation

leonardogruppelli · Sep 15, 2022 · 954e224 · 954e224
1 parent 324fd7b
commit 954e224
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 19 deletions.
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
   "devDependencies": {
     "@types/animejs": "^3.1.5",
     "@types/node": "^18.7.5",
+    "@types/three": "^0.144.0",
     "@vitejs/plugin-vue": "^3.0.3",
     "prettier": "^2.7.1",
     "typescript": "^4.6.4",

diff --git a/src/app.vue b/src/app.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { ref, onMounted, render } from 'vue';
+import { ref } from 'vue';
 import { Renderer, Camera, Scene, Group, Box, MatcapMaterial } from 'troisjs';
+import { DefaultLoadingManager } from 'three';
 import anime from 'animejs';
 
 const size = 1;
@@ -10,63 +11,79 @@ const quantity = 3;
 const position = spacing * 2 - quantity;
 
 const renderer = ref<InstanceType<typeof Renderer>>(null!);
+const camera = ref<InstanceType<typeof Camera>>(null!);
+const scene = ref<InstanceType<typeof Scene>>(null!);
 const group = ref<InstanceType<typeof Group>>(null!);
 const boxes = ref<InstanceType<typeof Box>[]>(null!);
+const material = ref<InstanceType<typeof MatcapMaterial>>(null!);
 
 function animate() {
   const scales = boxes.value.map((box) => ({
-    x: box.mesh.scale.x,
-    y: box.mesh.scale.y,
-    z: box.mesh.scale.z,
+    x: box.mesh?.scale.x || 0,
+    y: box.mesh?.scale.y || 0,
+    z: box.mesh?.scale.z || 0,
   }));
 
   anime({
     targets: scales,
-    x: 1.25,
-    y: 1.25,
-    z: 1.25,
-    direction: 'alternate',
+    x: [
+      { value: 1.25, duration: 250 },
+      { value: 1, duration: 250 },
+    ],
+    y: [
+      { value: 1.25, duration: 250 },
+      { value: 1, duration: 250 },
+    ],
+    z: [
+      { value: 1.25, duration: 250 },
+      { value: 1, duration: 250 },
+    ],
     easing: 'cubicBezier(1, -.6, .25, 1)',
     loop: true,
-    delay: anime.stagger(15),
+    delay: anime.stagger(50, { grid: [3, 9], from: 'last' }),
     update() {
       scales.forEach((scale, index) => {
-        if (!boxes.value[index]) return;
+        const mesh = boxes.value[index]?.mesh;
 
-        boxes.value[index].mesh.scale.x = scale.x;
-        boxes.value[index].mesh.scale.y = scale.y;
-        boxes.value[index].mesh.scale.z = scale.z;
+        if (!mesh) return;
+
+        mesh.scale.x = scale.x;
+        mesh.scale.y = scale.y;
+        mesh.scale.z = scale.z;
       });
     },
   });
 }
 
 function init() {
-  window.addEventListener('load', animate);
+  animate();
 }
 
-onMounted(init);
+DefaultLoadingManager.onLoad = init;
 </script>
 
 <template>
   <Renderer
     ref="renderer"
     :orbit-ctrl="{
       autoRotate: true,
-      enableDamping: true,
-      dampingFactor: 0.05,
+      enableZoom: false,
     }"
     antialias
     resize
     shadow
   >
     <Camera
+      ref="camera"
       :position="{
         z: 10,
       }"
     />
 
-    <Scene background="#111111">
+    <Scene
+      ref="scene"
+      background="#111111"
+    >
       <Group
         ref="group"
         :position="{
@@ -92,7 +109,10 @@ onMounted(init);
                 receive-shadow
                 cast-shadow
               >
-                <MatcapMaterial name="2E763A_78A0B7_B3D1CF_14F209" />
+                <MatcapMaterial
+                  ref="material"
+                  name="2E763A_78A0B7_B3D1CF_14F209"
+                />
               </Box>
             </template>
           </template>

diff --git a/yarn.lock b/yarn.lock
@@ -22,6 +22,18 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-18.7.5.tgz#f1c1d4b7d8231c0278962347163656f9c36f3e83"
   integrity sha512-NcKK6Ts+9LqdHJaW6HQmgr7dT/i3GOHG+pt6BiWv++5SnjtRd4NXeiuN2kA153SjhXPR/AhHIPHPbrsbpUVOww==
 
+"@types/three@^0.144.0":
+  version "0.144.0"
+  resolved "https://registry.yarnpkg.com/@types/three/-/three-0.144.0.tgz#a154f40122dbc3668c5424a5373f3965c6564557"
+  integrity sha512-psvEs6q5rLN50jUYZ3D4pZMfxTbdt3A243blt0my7/NcL6chaCZpHe2csbCtx0SOD9fI/XnF3wnVUAYZGqCSYg==
+  dependencies:
+    "@types/webxr" "*"
+
+"@types/webxr@*":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@types/webxr/-/webxr-0.5.0.tgz#aae1cef3210d88fd4204f8c33385a0bbc4da07c9"
+  integrity sha512-IUMDPSXnYIbEO2IereEFcgcqfDREOgmbGqtrMpVPpACTU6pltYLwHgVkrnYv0XhWEcjio9sYEfIEzgn3c7nDqA==
+
 "@vitejs/plugin-vue@^3.0.3":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-3.0.3.tgz#7e3e401ccb30b4380d2279d9849281413f1791ef"