Merge pull request #29 from M3-org/mixamo-support

Mixamo support

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

@@ -0,0 +1,47 @@
+// FileDropComponent.js
+import React, { useEffect, useState } from 'react';
+import styles from './FileDropComponent.module.css';
+
+export default function FileDropComponent ({onFileDrop}){
+  const [isDragging, setIsDragging] = useState(false);
+
+  useEffect(() => {
+    const handleDrop = (event) => {
+      event.preventDefault();
+      setIsDragging(false);
+      const file = event.dataTransfer.files[0];
+      if (onFileDrop) {
+        onFileDrop(file);
+      }
+    };
+
+    const handleDragOver = (event) => {
+      event.preventDefault();
+      setIsDragging(true);
+    };
+
+    // Attach event listeners to the window
+    window.addEventListener('drop', handleDrop);
+    window.addEventListener('dragover', handleDragOver);
+
+    // Clean up event listeners on component unmount
+    return () => {
+      window.removeEventListener('drop', handleDrop);
+      window.removeEventListener('dragover', handleDragOver);
+    };
+  }, []);
+
+  const handleDragLeave = () => {
+    setIsDragging(false);
+  };
+
+  return (
+    <div
+      onDragLeave={handleDragLeave}
+      className={styles.dropArea}
+      style={{ display: isDragging ? 'flex': 'none' }}
+    >
+    </div>
+  );
+};
+

src/components/FileDropComponent.module.css

@@ -0,0 +1,13 @@
+.dropArea {
+    height: 100vh;
+    width: 100vw;
+    border: '2px dashed #aaa';
+    background-size: cover;
+    text-align: 'center';
+    display: fixed;
+    flex-direction: column;
+    align-items: center;
+    overflow: hidden;
+    position: absolute;
+    z-index: 10000;
+}

src/components/Selector.jsx

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useState } from "react"
 import * as THREE from "three"
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"
-import { MToonMaterial, VRMLoaderPlugin } from "@pixiv/three-vrm"
+import { MToonMaterial, VRMLoaderPlugin, VRMUtils } from "@pixiv/three-vrm"
 import cancel from "../../public/ui/selector/cancel.png"
 import { addModelData, disposeVRM } from "../library/utils"
 import { computeBoundsTree, disposeBoundsTree, acceleratedRaycast, SAH } from 'three-mesh-bvh';
@@ -42,7 +42,8 @@ export default function Selector({confirmDialog, templateInfo, animationManager,
     removeOption,
     saveUserSelection,
     setIsChangingWholeAvatar,
-    debugMode
+    debugMode,
+    vrmHelperRoot
   } = useContext(SceneContext)
   const {
     playSound
@@ -274,7 +275,7 @@ export default function Selector({confirmDialog, templateInfo, animationManager,
 
   // load options first
   const loadOptions = (options, filterRestrictions = true, useTemplateBaseDirectory = true, saveUserSel = true) => {
-  //const loadOptions = (options, filterRestrictions = true) => {
+    //const loadOptions = (options, filterRestrictions = true) => {
     for (const option of options) {
       updateCurrentTraitMap(option.trait.trait, option.key)
     }
@@ -306,8 +307,10 @@ export default function Selector({confirmDialog, templateInfo, animationManager,
 
     //create a gltf loader for the 3d models
     const gltfLoader = new GLTFLoader(loadingManager)
+    gltfLoader.crossOrigin = 'anonymous';
     gltfLoader.register((parser) => {
-      return new VRMLoaderPlugin(parser)
+      //return new VRMLoaderPlugin(parser, {autoUpdateHumanBones: true, helperRoot:vrmHelperRoot})
+      return new VRMLoaderPlugin(parser, {autoUpdateHumanBones: true})
     })
 
     // and a texture loaders for all the textures
@@ -326,11 +329,8 @@ 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)
-        // setLoadPercentage(0)
-        // resolve(resultData);
-        // setIsLoading(false)
       }
       loadingManager.onProgress = function(url, loaded, total){
         setLoadPercentage(Math.round(loaded/total * 100 ))
@@ -517,8 +517,8 @@ export default function Selector({confirmDialog, templateInfo, animationManager,
 
       lookatManager.addVRM(vrm)
 
-      // animation setup section
-      // play animations on this vrm  TODO, letscreate a single animation manager per traitInfo, as model may change since it is now a trait option
+      //animation setup section
+      //play animations on this vrm  TODO, letscreate a single animation manager per traitInfo, as model may change since it is now a trait option
       animationManager.startAnimation(vrm)
 
       // mesh target setup section

src/context/SceneContext.jsx

@@ -12,6 +12,9 @@ import { local } from "../library/store"
 export const SceneContext = createContext()
 
 export const SceneProvider = (props) => {
+
+  const [vrmHelperRoot, setVrmHelperRoot] = useState(null);
+
   const initializeScene = () => {
     const scene = new THREE.Scene()
     const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
@@ -22,10 +25,16 @@ export const SceneProvider = (props) => {
     directionalLight.position.set(0, 1, 1);
     scene.add(directionalLight);
 
+    const helperRoot = new THREE.Group();
+    helperRoot.renderOrder = 10000;
+    scene.add( helperRoot );
+    setVrmHelperRoot(helperRoot);
+
     return scene;
   }
 
   const [scene, setScene] = useState(initializeScene)
+
 
   const [currentTraitName, setCurrentTraitName] = useState(null)
   const [currentOptions, setCurrentOptions] = useState([])
@@ -193,6 +202,8 @@ export const SceneProvider = (props) => {
   return (
     <SceneContext.Provider
       value={{
+        vrmHelperRoot,
+
         awaitDisplay, 
         setAwaitDisplay,
         templateInfo,

src/library/VRMRigMapMixamo.js

@@ -0,0 +1,57 @@
+/**
+ * A map from Mixamo rig name to VRM Humanoid bone name
+ */
+export const VRMRigMapMixamo = {
+	mixamorigHips: 'hips',
+	mixamorigSpine: 'spine',
+	mixamorigSpine1: 'chest',
+	mixamorigSpine2: 'upperChest',
+	mixamorigNeck: 'neck',
+	mixamorigHead: 'head',
+	mixamorigLeftShoulder: 'leftShoulder',
+	mixamorigLeftArm: 'leftUpperArm',
+	mixamorigLeftForeArm: 'leftLowerArm',
+	mixamorigLeftHand: 'leftHand',
+	mixamorigLeftHandThumb1: 'leftThumbMetacarpal',
+	mixamorigLeftHandThumb2: 'leftThumbProximal',
+	mixamorigLeftHandThumb3: 'leftThumbDistal',
+	mixamorigLeftHandIndex1: 'leftIndexProximal',
+	mixamorigLeftHandIndex2: 'leftIndexIntermediate',
+	mixamorigLeftHandIndex3: 'leftIndexDistal',
+	mixamorigLeftHandMiddle1: 'leftMiddleProximal',
+	mixamorigLeftHandMiddle2: 'leftMiddleIntermediate',
+	mixamorigLeftHandMiddle3: 'leftMiddleDistal',
+	mixamorigLeftHandRing1: 'leftRingProximal',
+	mixamorigLeftHandRing2: 'leftRingIntermediate',
+	mixamorigLeftHandRing3: 'leftRingDistal',
+	mixamorigLeftHandPinky1: 'leftLittleProximal',
+	mixamorigLeftHandPinky2: 'leftLittleIntermediate',
+	mixamorigLeftHandPinky3: 'leftLittleDistal',
+	mixamorigRightShoulder: 'rightShoulder',
+	mixamorigRightArm: 'rightUpperArm',
+	mixamorigRightForeArm: 'rightLowerArm',
+	mixamorigRightHand: 'rightHand',
+	mixamorigRightHandPinky1: 'rightLittleProximal',
+	mixamorigRightHandPinky2: 'rightLittleIntermediate',
+	mixamorigRightHandPinky3: 'rightLittleDistal',
+	mixamorigRightHandRing1: 'rightRingProximal',
+	mixamorigRightHandRing2: 'rightRingIntermediate',
+	mixamorigRightHandRing3: 'rightRingDistal',
+	mixamorigRightHandMiddle1: 'rightMiddleProximal',
+	mixamorigRightHandMiddle2: 'rightMiddleIntermediate',
+	mixamorigRightHandMiddle3: 'rightMiddleDistal',
+	mixamorigRightHandIndex1: 'rightIndexProximal',
+	mixamorigRightHandIndex2: 'rightIndexIntermediate',
+	mixamorigRightHandIndex3: 'rightIndexDistal',
+	mixamorigRightHandThumb1: 'rightThumbMetacarpal',
+	mixamorigRightHandThumb2: 'rightThumbProximal',
+	mixamorigRightHandThumb3: 'rightThumbDistal',
+	mixamorigLeftUpLeg: 'leftUpperLeg',
+	mixamorigLeftLeg: 'leftLowerLeg',
+	mixamorigLeftFoot: 'leftFoot',
+	mixamorigLeftToeBase: 'leftToes',
+	mixamorigRightUpLeg: 'rightUpperLeg',
+	mixamorigRightLeg: 'rightLowerLeg',
+	mixamorigRightFoot: 'rightFoot',
+	mixamorigRightToeBase: 'rightToes',
+};