feat(cientos): updated onLoop delta usage for useAnimations

packages/cientos/src/core/useAnimations.ts

@@ -1,13 +1,16 @@
-import { AnimationMixer, Clock, Object3D } from 'three'
+import { AnimationAction, AnimationClip, AnimationMixer, Object3D, Scene } from 'three'
 import { useRenderLoop } from '@tresjs/core'
 import { ref, Ref, shallowReactive } from 'vue'
 
-export function useAnimations<T extends Animation>(animations: T[], modelRef?: Ref<Object3D | undefined | null>) {
+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({})
+  const actions = shallowReactive<{ [key: string]: AnimationAction }>({})
 
   animations.forEach(animation => {
     const action = mixer.clipAction(animation, reference.value)
@@ -16,11 +19,7 @@ export function useAnimations<T extends Animation>(animations: T[], modelRef?: R
 
   const { onLoop } = useRenderLoop()
 
-  // TODO: Workaround for https://github.com/Tresjs/tres/issues/81
-  const clock = new Clock()
-
-  onLoop(() => {
-    const delta = clock.getDelta()
+  onLoop(({ delta }) => {
     mixer.update(delta)
   })
 

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/tres/src/components/AnimatedModel.vue

@@ -1,46 +1,42 @@
 <script setup lang="ts">
-import { AnimationMixer, Clock, Color, sRGBEncoding } from 'three'
+import { Color, sRGBEncoding } from 'three'
 
 /* import { OrbitControls, useTweakPane, useGLTF, useAnimations } from '../../../cientos/src/' */
 import { OrbitControls, useTweakPane, useGLTF, useAnimations } from '@tresjs/cientos'
-import { useRenderLoop } from '../core'
 
 const bgColor = new Color('#F78B3D')
-useTweakPane()
 
-/* const jeepRef = ref() */
+const { pane } = useTweakPane()
 
 const { scene: model, animations } = await useGLTF('/models/ugly-naked-bunny/ugly-naked-bunny-animated.gltf')
 
 const { actions, mixer } = useAnimations(animations, model)
 
-console.log({ animations, actions, mixer })
-
-actions.Greeting.play()
+let currentAction = actions.Greeting
 
-/* const mixer = new AnimationMixer(model)
+currentAction.play()
 
-const actions = {}
+pane
+  .addBlade({
+    view: 'list',
+    label: 'scene',
+    options: Object.keys(actions).map(name => ({
+      text: name,
+      value: name,
+    })),
+    value: 'Greeting',
+  })
+  .on('change', ({ value }) => {
+    if (currentAction) {
+      currentAction.stop()
+    }
 
-animations.forEach(animation => {
-  const action = mixer.clipAction(animation)
-  actions[animation.name] = action
-})
+    currentAction = actions[value]
 
-actions.Greeting.play()
+    currentAction.play()
+  })
 
-const { onLoop } = useRenderLoop()
-const clock = new Clock()
-onLoop(({ elapsed }) => {
-  const delta = clock.getDelta()
-  mixer.update(delta)
-}) */
-
-/* watch(jeepRef, ({ getModel }) => {
-  const model = getModel()
-  model.scale.set(0.01, 0.01, 0.01)
-  model.rotation.y = -Math.PI / 2
-}) */
+console.log({ animations, actions, mixer })
 </script>
 
 <template>

packages/tres/src/core/useRenderLoop/index.ts

@@ -1,12 +1,11 @@
-import { TresState } from './../useTres/index'
-import { useTres } from '/@/core/'
 import { createEventHook, EventHookOn, Fn, useRafFn } from '@vueuse/core'
 import { Ref } from 'vue'
+import { Clock } from 'three'
 
 export interface RenderLoop {
   delta: number
   elapsed: number
-  state: TresState
+  clock: Clock
 }
 
 export interface UseRenderLoopReturn {
@@ -22,22 +21,22 @@ const onBeforeLoop = createEventHook<RenderLoop>()
 const onLoop = createEventHook<RenderLoop>()
 const onAfterLoop = createEventHook<RenderLoop>()
 
+const clock = new Clock()
 let delta = 0
 let elapsed = 0
+
 const { pause, resume, isActive } = useRafFn(
   () => {
-    const { state } = useTres()
-    onBeforeLoop.trigger({ delta, elapsed, state })
-    onLoop.trigger({ delta, elapsed, state })
-    onAfterLoop.trigger({ delta, elapsed, state })
+    onBeforeLoop.trigger({ delta, elapsed, clock })
+    onLoop.trigger({ delta, elapsed, clock })
+    onAfterLoop.trigger({ delta, elapsed, clock })
   },
   { immediate: false },
 )
 
 onAfterLoop.on(() => {
-  const { state } = useTres()
-  delta = state.clock.getDelta()
-  elapsed = state.clock.getElapsedTime()
+  delta = clock.getDelta()
+  elapsed = clock.getElapsedTime()
 })
 
 export function useRenderLoop(): UseRenderLoopReturn {