Merge pull request #85 from Tresjs/feature/80-useanimation-composable-for-animationmixer

feat(cientos) useanimation composable for animationmixer

Author: alvarosabu

docs/.vitepress/config.ts

@@ -63,7 +63,10 @@ export default defineConfig({
           { text: 'Introduction', link: '/cientos/' },
           {
             text: 'Abstractions',
-            items: [{ text: 'Text3D', link: '/cientos/abstractions/text-3d' }],
+            items: [
+              { text: 'Text3D', link: '/cientos/abstractions/text-3d' },
+              { text: 'useAnimations', link: '/cientos/abstractions/use-animations' },
+            ],
           },
           {
             text: 'Controls',

docs/cientos/abstractions/use-animations.md

@@ -0,0 +1,21 @@
+# useAnimations <Badge type="warning" text="^1.5.0" />
+
+`useAnimation` is a composable that returns a `shallowReactive` with all the models actions based on the animations provided. It is a wrapper around the [AnimationMixer](https://threejs.org/docs/#api/en/animation/AnimationMixer) class.
+
+<StackBlitzEmbed projectId="tresjs-use-animations" />
+
+## Usage
+
+```ts
+import { useAnimations } from '@tresjs/cientos'
+
+const { scene: model, animations } = await useGLTF('/models/ugly-naked-bunny.gltf')
+
+// Animations [ { name: 'Greeting'}, { name: 'Idle' } ]
+
+const { actions, mixer } = useAnimations(animations, model)
+
+let currentAction = actions.Greeting
+
+currentAction.play()
+```

packages/cientos/src/core/useAnimations.ts

@@ -0,0 +1,30 @@
+import { AnimationAction, AnimationClip, AnimationMixer, Object3D, Scene } from 'three'
+import { useRenderLoop } from '@tresjs/core'
+import { ref, Ref, shallowReactive } from 'vue'
+
+export function useAnimations<T extends AnimationClip>(
+  animations: T[],
+  modelRef?: Scene | Ref<Object3D | undefined | null>,
+) {
+  const reference: Ref<Object3D> = ref(modelRef) as Ref<Object3D>
+
+  const mixer = new AnimationMixer(reference.value)
+
+  const actions = shallowReactive<{ [key: string]: AnimationAction }>({})
+
+  animations.forEach(animation => {
+    const action = mixer.clipAction(animation, reference.value)
+    actions[animation.name] = action
+  })
+
+  const { onLoop } = useRenderLoop()
+
+  onLoop(({ delta }) => {
+    mixer.update(delta)
+  })
+
+  return {
+    actions,
+    mixer,
+  }
+}

packages/cientos/src/core/useGLTF/index.ts

@@ -8,6 +8,7 @@ export interface GLTFLoaderOptions {
 }
 
 export interface GLTFResult {
+  animations: Array<THREE.AnimationClip>
   nodes: Array<TresObject>
   materials: Array<THREE.Material>
   scene: THREE.Scene

packages/cientos/src/index.ts

@@ -1,6 +1,7 @@
 import OrbitControls from './core/OrbitControls.vue'
 import TransformControls from './core/TransformControls.vue'
 import { useTweakPane } from './core/useTweakPane'
+import { useAnimations } from './core/useAnimations'
 import { GLTFModel } from './core/useGLTF/component'
 import { FBXModel } from './core/useFBX/component'
 import Text3D from './core/Text3D.vue'
@@ -9,4 +10,4 @@ import Plane from './core/Plane.vue'
 export * from './core/useGLTF'
 export * from './core/useFBX'
 export * from './types'
-export { OrbitControls, TransformControls, useTweakPane, GLTFModel, FBXModel, Text3D, Plane }
+export { OrbitControls, TransformControls, useTweakPane, GLTFModel, FBXModel, Text3D, Plane, useAnimations }