feat: 🎸 add KTX2/Draco loader to avatar-editor

✅ Closes: Hubs-Foundation#6209

src/react-components/avatar-editor.js

@@ -15,7 +15,10 @@ import { ensureAvatarMaterial } from "../utils/avatar-utils";
 import AvatarPreview from "./avatar-preview";
 import styles from "../assets/stylesheets/avatar-editor.scss";
 
+import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
+import { KTX2Loader } from "three/examples/jsm/loaders/KTX2Loader";
+import { getCustomGLTFParserURLResolver } from "../utils/media-url-utils";
 
 import dropdownArrowUrl from "../assets/images/dropdown_arrow.png";
 import dropdownArrow2xUrl from "../assets/images/[email protected]";
@@ -150,10 +153,23 @@ class AvatarEditor extends Component {
     e.preventDefault();
 
     if (this.inputFiles.glb && this.inputFiles.glb instanceof File) {
-      const gltfLoader = new GLTFLoader().register(parser => new GLTFBinarySplitterPlugin(parser));
       const gltfUrl = URL.createObjectURL(this.inputFiles.glb);
+      const loadingManager = new THREE.LoadingManager();
+      loadingManager.setURLModifier(getCustomGLTFParserURLResolver(gltfUrl));
+
+      const gltfLoader = new GLTFLoader(loadingManager).register(parser => new GLTFBinarySplitterPlugin(parser));
       const onProgress = console.log;
 
+      const ktxLoader = new KTX2Loader(loadingManager);
+      const dracoLoader = new DRACOLoader(loadingManager);
+
+      if (ktxLoader) {
+        gltfLoader.setKTX2Loader(ktxLoader);
+      }
+      if (dracoLoader) {
+        gltfLoader.setDRACOLoader(dracoLoader);
+      }
+
       await new Promise((resolve, reject) => {
         // GLTFBinarySplitterPlugin saves gltf and bin in gltf.files
         gltfLoader.load(