animation-transitions

<script lang="ts">
  import { Pane, Button } from 'svelte-tweakpane-ui'
  import { Canvas } from '@threlte/core'
  import Scene from './Scene.svelte'
  import type { CharacterActions } from './types'

  let action = $state<CharacterActions>('idle')
</script>

<Pane
  title="Transitions"
  position="fixed"
>
  <Button
    title="Idle"
    on:click={() => {
      action = 'idle'
    }}
  />
  <Button
    title="Walk"
    on:click={() => {
      action = 'walk'
    }}
  />
  <Button
    title="Run"
    on:click={() => {
      action = 'run'
    }}
  />
</Pane>

<div>
  <Canvas>
    <Scene {action} />
  </Canvas>
</div>

<style>
  div {
    position: relative;
    height: 100%;
    width: 100%;
  }
</style>

<script lang="ts">
  import { GLTF, useGltfAnimations } from '@threlte/extras'
  import type { CharacterActions } from './types'

  type Props = {
    actionKey: CharacterActions
  }
  let { actionKey = 'idle' }: Props = $props()

  let { gltf, actions } = useGltfAnimations()
  let currentActionKey: CharacterActions = 'idle'

  $effect(() => {
    // This effect acts like an init default pose
    $actions?.['idle']?.play()
  })

  $effect(() => {
    transitionTo(actionKey, 0.3)
  })

  function transitionTo(actionKey: CharacterActions, duration = 1) {
    const currentAction = $actions[currentActionKey]
    const nextAction = $actions[actionKey]
    if (!nextAction || currentAction === nextAction) return
    // Function inspired by: https://github.com/mrdoob/three.js/blob/master/examples/webgl_animation_skinning_blending.html
    nextAction.enabled = true
    if (currentAction) {
      currentAction.crossFadeTo(nextAction, duration, true)
    }
    // Not sure why I need this but the source code does not
    nextAction.play()
    currentActionKey = actionKey
  }
</script>

<GLTF
  bind:gltf={$gltf}
  url="https://threejs.org/examples/models/gltf/Xbot.glb"
  oncreate={(scene) => {
    scene.traverse((child) => {
      child.castShadow = true
    })
  }}
/>

<script lang="ts">
  import { MathUtils } from 'three'
  import { T } from '@threlte/core'
  import Character from './Character.svelte'

  let { action } = $props()
</script>

<T.PerspectiveCamera
  makeDefault
  position={[-0.85, 1.75, 2.46]}
  oncreate={(ref) => {
    ref.lookAt(0, 1, 0)
  }}
/>

<T.AmbientLight />
<T.DirectionalLight
  position={[10, 5, 5]}
  castShadow
/>

<Character actionKey={action} />

<T.Mesh
  rotation.x={MathUtils.degToRad(-90)}
  receiveShadow
>
  <T.CircleGeometry args={[3, 72]} />
  <T.MeshStandardMaterial color={'white'} />
</T.Mesh>

export type CharacterActions =
  | 'agree'
  | 'headShake'
  | 'idle'
  | 'run'
  | 'sad_pose'
  | 'sneak_pose'
  | 'walk'