Merge pull request #13 from 0b5vr/three-vrm-animation

deps: install @pixiv/three-vrm-animation

package.json

@@ -15,7 +15,8 @@
     "@charcoal-ui/styled": "^3.1.1",
     "@charcoal-ui/theme": "^3.1.1",
     "@gltf-transform/core": "^3.4.0",
-    "@pixiv/three-vrm": "^2.0.0",
+    "@pixiv/three-vrm": "^2.1.0",
+    "@pixiv/three-vrm-animation": "^2.1.0",
     "@types/node": "20.2.5",
     "@types/react": "18.2.9",
     "@types/react-dom": "18.2.4",

src/components/VrmViewer.tsx

@@ -1,14 +1,15 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { Viewer } from '@/features/vrmViewer/viewer';
 import AvatarSample_A from '../assets/AvatarSample_A.vrm';
-import { loadVRMAnimation } from '@/lib/VRMAnimation/loadVRMAnimation';
 import { IconButton } from '@charcoal-ui/react';
 import '@/icons';
 import { useAnimationFrame } from '@/utils/useAnimationFrame';
+import { loadVRMAnimation } from '@/lib/VRMAnimation/loadVRMAnimation';
 
 interface VRMViewerProps {
   blobURL: string | null;
 }
+
 export default function VrmViewer(props: VRMViewerProps) {
   const [viewer] = useState<Viewer>(new Viewer());
   const [loadFlag, setLoadFlag] = useState(false);

src/features/vrmViewer/Model.ts

@@ -1,7 +1,7 @@
 import * as THREE from 'three';
-import { VRM, VRMLoaderPlugin, VRMUtils } from '@pixiv/three-vrm';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
-import { VRMAnimation } from '../../lib/VRMAnimation/VRMAnimation';
+import { VRM, VRMLoaderPlugin, VRMUtils } from '@pixiv/three-vrm';
+import { VRMAnimation, createVRMAnimationClip } from '@pixiv/three-vrm-animation';
 
 export class Model {
   public vrm?: VRM;
@@ -41,7 +41,7 @@ export class Model {
     }
 
     this.currentAction?.stop();
-    const clip = vrmAnimation.createAnimationClip(vrm);
+    const clip = createVRMAnimationClip(vrmAnimation, vrm);
     const action = mixer.clipAction(clip);
 
     this.currentAction = action;