|
| 1 | +<script setup lang="ts"> |
| 2 | +import { computed, ref, watch } from 'vue' |
| 3 | +
|
| 4 | +const { state: model, nodes } = useGLTF('/models/husky.glb', { |
| 5 | + draco: true, |
| 6 | +}) |
| 7 | +const rig = computed(() => { |
| 8 | + console.log('Nodes:', nodes.value) |
| 9 | + return nodes.value.Root_Scene |
| 10 | +}) |
| 11 | +
|
| 12 | +const animations = computed(() => model.value?.animations || []) |
| 13 | +console.log('Loaded animations:', animations.value) |
| 14 | +
|
| 15 | +const { actions } = useAnimations(animations, rig) |
| 16 | +console.log('Available actions:', actions) |
| 17 | +const currentAction = ref<AnimationAction>() |
| 18 | +
|
| 19 | +const transitionToAnimation = (animationName: string, duration = 0.5) => { |
| 20 | + if (!actions) { return } |
| 21 | +
|
| 22 | + const nextAction = actions[animationName] |
| 23 | + if (!nextAction) { return } |
| 24 | +
|
| 25 | + // Fade out current animation |
| 26 | + if (currentAction.value) { |
| 27 | + currentAction.value.fadeOut(duration) |
| 28 | + } |
| 29 | +
|
| 30 | + // Fade in new animation |
| 31 | + nextAction.reset() |
| 32 | + nextAction.setEffectiveWeight(1) |
| 33 | + nextAction.play() |
| 34 | + nextAction.fadeIn(duration) |
| 35 | +
|
| 36 | + currentAction.value = nextAction |
| 37 | +} |
| 38 | +
|
| 39 | +// Définir la séquence d'animations |
| 40 | +const animationSequence = [ |
| 41 | + { name: 'Idle', duration: 1000, fadeDuration: 0.5 }, |
| 42 | + { name: 'Idle', duration: 5000, fadeDuration: 0.5 }, |
| 43 | + { name: 'Walk', duration: 5000, fadeDuration: 0.5 }, |
| 44 | + { name: 'Gallop', duration: 5000, fadeDuration: 0.5 }, |
| 45 | + { name: 'Gallop_Jump', duration: 1000, fadeDuration: 0.5 }, |
| 46 | + { name: 'Gallop', duration: 4000, fadeDuration: 0.5 }, |
| 47 | + { name: 'Walk', duration: 3000, fadeDuration: 0.5 }, |
| 48 | + { name: 'Idle_2', duration: 3000, fadeDuration: 0.5 }, |
| 49 | + { name: 'Idle', duration: 0, fadeDuration: 0.5 }, |
| 50 | +] |
| 51 | +
|
| 52 | +const isPlaying = ref(false) |
| 53 | +
|
| 54 | +const playAnimationSequence = async () => { |
| 55 | + if (!actions || isPlaying.value) { return } |
| 56 | +
|
| 57 | + isPlaying.value = true |
| 58 | +
|
| 59 | + for (const step of animationSequence) { |
| 60 | + console.log('Step:', step) |
| 61 | + transitionToAnimation(step.name, step.fadeDuration) |
| 62 | + if (step.duration > 0) { |
| 63 | + await new Promise(resolve => setTimeout(resolve, step.duration)) |
| 64 | + } |
| 65 | + } |
| 66 | +
|
| 67 | + isPlaying.value = false |
| 68 | +} |
| 69 | +
|
| 70 | +watch(actions, (newValue) => { |
| 71 | + console.log('Actions ready:', newValue) |
| 72 | + if (!newValue) { return } |
| 73 | + playAnimationSequence() |
| 74 | +}, { immediate: true }) |
| 75 | +
|
| 76 | +/* // Example: Transition from Idle to Cheer |
| 77 | +const playCheerAnimation = () => { |
| 78 | + transitionToAnimation('Walk', 0.3) |
| 79 | +} |
| 80 | +
|
| 81 | +const playIdleAnimation = () => { |
| 82 | + transitionToAnimation('Idle', 0.3) |
| 83 | +} |
| 84 | +
|
| 85 | +watch(actions, (actions) => { |
| 86 | + if (!actions) { return } |
| 87 | + console.log('Actions:', actions) |
| 88 | +
|
| 89 | + // Start with Idle animation |
| 90 | + playIdleAnimation() |
| 91 | +
|
| 92 | + // After 5 seconds, switch to Cheer animation |
| 93 | + setTimeout(() => { |
| 94 | + playCheerAnimation() |
| 95 | + }, 5000) |
| 96 | +}, { immediate: true }) */ |
| 97 | +</script> |
| 98 | + |
| 99 | +<template> |
| 100 | + <primitive v-if="rig" :object="rig" /> |
| 101 | +</template> |
0 commit comments