add drag and drop animations from mixamo

src/App.jsx

@@ -92,7 +92,7 @@ async function fetchScene() {
 async function fetchAnimation(templateInfo) {
   // create an animation manager for all the traits that will be loaded
   const newAnimationManager = new AnimationManager(templateInfo.offset)
-  await newAnimationManager.loadAnimations(templateInfo.animationPath)
+  await newAnimationManager.loadAnimations(templateInfo.animationPath, templateInfo.animationPath.endsWith('.fbx'))
   return newAnimationManager
 }
 

src/components/FileDropComponent.jsx

@@ -9,9 +9,7 @@ export default function FileDropComponent ({onFileDrop}){
     const handleDrop = (event) => {
       event.preventDefault();
       setIsDragging(false);
-      console.log(onFileDrop);
       const file = event.dataTransfer.files[0];
-      console.log('Dropped file:', file);
       if (onFileDrop) {
         onFileDrop(file);
       }

src/components/Selector.jsx

@@ -329,7 +329,7 @@ export default function Selector({confirmDialog, templateInfo, animationManager,
         setIsLoading(false)
       };
       loadingManager.onError = function (url){
-        console.log(resultData);
+        console.log("currentTraits", resultData);
         console.warn("error loading " + url)
       }
       loadingManager.onProgress = function(url, loaded, total){

src/library/animationManager.js

@@ -22,17 +22,8 @@ class AnimationControl {
     this.vrm = vrm;
     this.animationManager = null;
     this.animationManager = animationManager;
-    animations[0].tracks.map((track, index) => {
-      if(track.name === "neck.quaternion" || track.name === "spine.quaternion"){
-        animations[0].tracks.splice(index, 1)
-      }
-    })
-    // animations[0].tracks.splice(9, 2);
-    this.actions = [];
-    for (let i =0; i < animations.length;i++){
-      this.actions.push(this.mixer.clipAction(animations[i]));
-    }
-    this.actions[0].play();
+
+    this.setAnimations(animations);
 
     this.to = this.actions[curIdx]
 
@@ -50,6 +41,26 @@ class AnimationControl {
     this.actions[curIdx].time = animationManager.getToActionTime();
     this.actions[curIdx].play();
   }
+  setAnimations(animations, mixamoModel){
+    this.mixer.stopAllAction();
+    if (mixamoModel != null){
+      if (this.vrm != null)
+        animations = [getMixamoAnimation(animations, mixamoModel , this.vrm)]
+      // modify animations
+    }
+    animations[0].tracks.map((track, index) => {
+      if(track.name === "neck.quaternion" || track.name === "spine.quaternion"){
+        animations[0].tracks.splice(index, 1)
+      }
+    })
+
+    this.actions = [];
+    for (let i =0; i < animations.length;i++){
+      this.actions.push(this.mixer.clipAction(animations[i]));
+    }
+    this.actions[0].play();
+  }
+
   update(weightIn,weightOut){
     if (this.from != null) {
       this.from.weight = weightOut;
@@ -106,8 +117,8 @@ export class AnimationManager{
     }, 1000/30);
   }
 
-  async loadAnimations(path){
-    const loader = path.endsWith('.fbx') ? fbxLoader : gltfLoader;
+  async loadAnimations(path, isfbx = true){
+    const loader = isfbx ? fbxLoader : gltfLoader;
     const animationModel = await loader.loadAsync(path);
     // if we have mixamo animations store the model
     const clip = THREE.AnimationClip.findByName( animationModel.animations, 'mixamo.com' );
@@ -117,18 +128,22 @@ export class AnimationManager{
     }
     // if no mixamo animation is present, just save the animations
     else{
+      this.mixamoModel = null
       this.animations = animationModel.animations;
-      // offset hips
       if (this.offset)
         this.offsetHips();
     }
 
-
-
-
-
-    this.mainControl = new AnimationControl(this, animationModel, null, animationModel.animations, this.curAnimID, this.lastAnimID)
-    this.animationControls.push(this.mainControl)
+    if (this.mainControl == null){
+      this.mainControl = new AnimationControl(this, animationModel, null, animationModel.animations, this.curAnimID, this.lastAnimID)
+      this.animationControls.push(this.mainControl)
+    }
+    else{
+      //cons
+      this.animationControls.forEach(animationControl => {
+        animationControl.setAnimations(animationModel.animations, this.mixamoModel)
+      });
+    }
 
   }
 

src/pages/Appearance.jsx

@@ -77,8 +77,13 @@ function Appearance({
   const { t } = useContext(LanguageContext)
 
   const handleFileDrop = (file) => {
-    // Handle the dropped file as needed
-    console.log('Handling dropped file:', file);
+    // Check if the file has the .fbx extension
+    if (file && file.name.toLowerCase().endsWith('.fbx')) {
+      console.log('Dropped .fbx file:', file);
+      const path = URL.createObjectURL(file);
+      animationManager.loadAnimations(path, true);
+      // Handle the dropped .fbx file
+    } 
   };
 
   return (