diff --git a/src/components/TraitInformation.module.css b/src/components/TraitInformation.module.css index dee01a70..5708bc45 100644 --- a/src/components/TraitInformation.module.css +++ b/src/components/TraitInformation.module.css @@ -134,9 +134,9 @@ .checkboxHolder { display: flex; - gap: 20px; + gap: 30px; align-items: center; - justify-content: flex-start; + justify-content: center; align-content: center; height: 40px; } \ No newline at end of file diff --git a/src/library/animationManager.js b/src/library/animationManager.js index 76e6185e..3084b992 100644 --- a/src/library/animationManager.js +++ b/src/library/animationManager.js @@ -25,6 +25,9 @@ class AnimationControl { this.animationManager = animationManager; this.mixamoModel = null; + this.fadeOutActions = null; + this.newAnimationWeight = 1; + this.neckBone = vrm?.humanoid?.humanBones?.neck; this.spineBone = vrm?.humanoid?.humanBones?.spine; @@ -55,14 +58,23 @@ class AnimationControl { setAnimations(animations, mixamoModel, mouseLookEnabled = null){ mouseLookEnabled = mouseLookEnabled == null ? this.animationManager.mouseLookEnabled : mouseLookEnabled; this.animations = animations; - this.mixer.stopAllAction(); + //this.mixer.stopAllAction(); if (mixamoModel != null){ if (this.vrm != null){ - animations = [getMixamoAnimation(animations, mixamoModel , this.vrm)] - this.mixamoModel = mixamoModel; + const mixamoAnimation = getMixamoAnimation(animations, mixamoModel , this.vrm); + if (mixamoAnimation){ + animations = [mixamoAnimation] + this.mixamoModel = mixamoModel; + } } - // modify animations + } else{ + const cloneAnims = []; + animations.forEach(animation => { + cloneAnims.push(animation.clone()); + }); + animations = cloneAnims; } + // modify animations if (mouseLookEnabled){ animations[0].tracks.map((track, index) => { if(track.name === "neck.quaternion" || track.name === "spine.quaternion"){ @@ -71,15 +83,39 @@ class AnimationControl { }) } + this.fadeOutActions = this.actions; this.actions = []; + this.newAnimationWeight = 0; for (let i =0; i < animations.length;i++){ this.actions.push(this.mixer.clipAction(animations[i])); } + this.actions[0].weight = 0; this.actions[0].play(); } update(weightIn,weightOut){ + if (this.fadeOutActions != null){ + this.newAnimationWeight += 1/5; + this.fadeOutActions.forEach(action => { + action.weight = 1 - this.newAnimationWeight; + }); + + if (this.newAnimationWeight >= 1){ + this.newAnimationWeight = 1; + this.fadeOutActions.forEach(action => { + action.weight = 0; + action.stop(); + }); + this.fadeOutActions = null; + } + + this.actions.forEach(action => { + action.weight = this.newAnimationWeight; + }); + + } + if (this.from != null) { this.from.weight = weightOut; } diff --git a/src/library/loadMixamoAnimation.js b/src/library/loadMixamoAnimation.js index bf7b0353..a4c97d0c 100644 --- a/src/library/loadMixamoAnimation.js +++ b/src/library/loadMixamoAnimation.js @@ -10,6 +10,8 @@ import { VRMRigMapMixamo } from './VRMRigMapMixamo.js'; */ export function getMixamoAnimation( animations, model, vrm ) { const clip = THREE.AnimationClip.findByName( animations, 'mixamo.com' ); // extract the AnimationClip + if (clip == null) + return null; const tracks = []; // KeyframeTracks compatible with VRM will be added here const restRotationInverse = new THREE.Quaternion();