@threlte/extras/dist/hooks/useGltfAnimations.svelte.d.ts

Utilities, abstractions and plugins for your Threlte apps

import { type Readable, type Writable } from 'svelte/store';
import { AnimationMixer, Object3D, type AnimationAction } from 'three';
import type { ThrelteGltf } from '../types/types.js';
type UseGltfAnimationsReturnType<Actions> = {
    gltf: Writable<ThrelteGltf | undefined>;
    mixer: AnimationMixer;
    actions: Readable<Actions>;
    root: Writable<Object3D | undefined>;
};
/**
 * Convenience hook to use animations loaded with the `<GLTF>` component or the
 * `useGltf` hook.
 *
 * Pass `gltf` as a getter so reads are tracked through runes automatically.
 * The optional `root` getter binds animations to a different `Object3D` than
 * the gltf's own scene — useful when retargeting clips onto a separate rig.
 *
 * ### Example with `useGltf`
 *
 * ```svelte
 * <script lang="ts">
 *   import { useGltf, useGltfAnimations } from '@threlte/extras'
 *
 *   const gltf = useGltf('/Bengal.glb')
 *   const { actions } = useGltfAnimations<'Run' | 'Idle'>(() => $gltf)
 *
 *   $effect(() => {
 *     $actions.Run?.play()
 *   })
 * </script>
 * ```
 *
 * ### Example with `<GLTF>` and `bind:gltf`
 *
 * ```svelte
 * <script lang="ts">
 *   import { GLTF, useGltfAnimations, type ThrelteGltf } from '@threlte/extras'
 *
 *   let gltf = $state<ThrelteGltf | undefined>()
 *   const { actions } = useGltfAnimations<'Run'>(() => gltf)
 * </script>
 *
 * <GLTF url="/Bengal.glb" bind:gltf />
 * ```
 */
export declare function useGltfAnimations<T extends string, Actions extends Partial<Record<T, AnimationAction>> = Partial<Record<T, AnimationAction>>>(gltf: () => ThrelteGltf | undefined, root?: () => Object3D | undefined): UseGltfAnimationsReturnType<Actions>;
/**
 * @deprecated Pass `gltf` as a getter function instead. This signature will be
 * removed in Threlte 9.
 *
 * ```ts
 * // Before
 * const { gltf, actions } = useGltfAnimations()
 * // <GLTF url="/model.glb" bind:gltf={$gltf} />
 *
 * // After
 * let gltf = $state<ThrelteGltf>()
 * const { actions } = useGltfAnimations(() => gltf)
 * // <GLTF url="/model.glb" bind:gltf />
 * ```
 */
export declare function useGltfAnimations<T extends string, Actions extends Partial<Record<T, AnimationAction>> = Partial<Record<T, AnimationAction>>>(root?: Object3D): UseGltfAnimationsReturnType<Actions>;
/**
 * @deprecated Pass `gltf` as a getter function instead. This signature will be
 * removed in Threlte 9.
 *
 * ```ts
 * // Before
 * const gltf = useGltf('/model.glb')
 * const { actions } = useGltfAnimations(gltf)
 *
 * // After
 * const gltf = useGltf('/model.glb')
 * const { actions } = useGltfAnimations(() => $gltf)
 * ```
 */
export declare function useGltfAnimations<T extends string, Actions extends Partial<Record<T, AnimationAction>> = Partial<Record<T, AnimationAction>>>(gltf: Writable<ThrelteGltf | undefined>, root?: Object3D): UseGltfAnimationsReturnType<Actions>;
export {};