feat: enable meshopt decoder

package.json

@@ -150,6 +150,7 @@
     "npm": "8.6.0"
   },
   "dependencies": {
+    "gltfpack": "^0.21.0",
     "jotai": "^2.2.2"
   }
 }

src/services/Animation.service.ts

@@ -1,6 +1,7 @@
 import { AnimationClip, Group } from 'three';
 
 import { FBXLoader, GLTFLoader } from 'three-stdlib';
+import { MeshoptDecoder } from './meshopt_decoder';
 
 interface ClipWithType {
   group: Group;
@@ -13,6 +14,7 @@ const MIXAMO_SCALE = 0.01;
 
 const fbxLoader = new FBXLoader();
 const gltfLoader = new GLTFLoader();
+gltfLoader.setMeshoptDecoder(MeshoptDecoder);
 
 function normaliseFbxAnimation(fbx: Group, index: number = 0) {
   const { tracks } = fbx.animations[index];

src/services/Models.service.tsx

@@ -18,6 +18,7 @@ import { GLTF, GLTFLoader, DRACOLoader } from 'three-stdlib';
 import { suspend } from 'suspend-react';
 import { Emotion } from 'src/components/Avatar/Avatar.component';
 import { BloomConfiguration } from 'src/types';
+import { MeshoptDecoder } from './meshopt_decoder';
 
 export interface CustomNode extends Object3D {
   geometry: BufferGeometry;
@@ -211,6 +212,8 @@ export const useEmotion = (nodes: ObjectMap['nodes'], emotion?: Emotion) => {
 };
 
 const loader = new GLTFLoader();
+loader.setMeshoptDecoder(MeshoptDecoder);
+
 const dracoLoader = new DRACOLoader();
 dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.5.5/');
 loader.setDRACOLoader(dracoLoader);