Add callback to be able to customize the instance of the loader that is

created

Author: aranega

examples/vite-redux-toolkit-react-app/src/components/viewers/Canvas3DExample.tsx

@@ -1,7 +1,14 @@
 import React, { Suspense, useRef, useState } from "react";
 import { Box } from "@mui/material";
 import { useFrame } from "@react-three/fiber";
-import { CameraControls, Center, Html } from "@react-three/drei";
+import {
+  CameraControls,
+  Center,
+  Gltf,
+  Html,
+  useCamera,
+  useGLTF,
+} from "@react-three/drei";
 import { Mesh } from "three";
 import * as THREE from "three";
 import { STLLoader } from "three/examples/jsm/loaders/STLLoader";
@@ -40,7 +47,6 @@ function MyRotatingBox() {
         setSwitchColor((prev) => !prev);
       }}
       ref={myMesh}
-      position={[10, 10, 10]}
     >
       <boxGeometry />
       <meshPhongMaterial color={switchColor ? "royalblue" : "hotpink"} />
@@ -65,21 +71,23 @@ const Canvas3DContent: React.FC = () => {
     `http://localhost:${window.location.port}/n.stl`,
   ];
 
-  const stlGeometries = useParallelLoader(
-    STLLoader,
-    urls,
-    (url, error) => {
+  const stlGeometries = useParallelLoader(STLLoader, urls, undefined, {
+    onError: (url, error) => {
       console.debug("ERROR LOADING STL", url, error);
     },
-    (url, event) => {
+    onProgress: (url, event) => {
       console.debug("STL LOAD PROGRESS", url, event);
-    }
-  );
+    },
+  });
   const objGroups = useParallelLoader(
     OBJLoader,
     `http://localhost:${window.location.port}/2.obj`
   );
 
+  useGLTF.setDecoderPath(
+    "https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/jsm/libs/draco/"
+  );
+
   return (
     <Canvas3D frameloop={"always"}>
       <group>
@@ -94,8 +102,14 @@ const Canvas3DContent: React.FC = () => {
             <primitive key={url} object={group} />
           ))}
         </Center>
+        {/* <Center>
+          <Gltf
+            src={`http://localhost:${window.location.port}/Avocado.gltf`}
+            useDraco={true}
+          />
+        </Center> */}
       </group>
-      <MyRotatingBox />
+      {/* <MyRotatingBox /> */}
     </Canvas3D>
   );
 };

geppetto.js/geppetto-ui/src/3d-canvas/Canvas3D.tsx

@@ -4,6 +4,7 @@ import React, { useEffect, useRef } from "react";
 import { CameraControls } from "@react-three/drei";
 import { useState } from "react";
 import { Loader } from "three";
+import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
 
 type Canvas3DBaseProps = {
   children?;
@@ -51,17 +52,23 @@ export const Canvas3D: React.FC<Canvas3DProps> = ({
  *
  * @param loader The loader class to use for loading (e.g., STLLoader, OBJLoader)
  * @param urls the URL or array of URLs to load
- * @param onLoadError the callback function that is called when an error occurs during loading of a URL.
+ * @param loaderInit the callback function that is called just after creating the loader.
+ * @param progress an object that contains 3 optional keys: onError, onProgress, onFinish.
+ * @param onError the callback function that is called when an error occurs during loading of a URL.
  * @param onProgress the callback function that is called to report progress during loading of a URL.
+ * @param onFinish the callback function that is called to report that the object at an URL loaded properly.
  * @returns an object mapping each URL to its loaded 3D object. If a URL failed to load, it will not be included in the returned object.
  */
 export const useParallelLoader = <T,>(
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   loader: new (...args: any[]) => Loader<T>,
   urls: string[] | string,
-  onLoadError?: (url, error) => void,
-  onProgress?: (url, event: ProgressEvent<EventTarget>) => void
-  // onLoadSuccess?: () => void
+  loaderInit?: (loader) => void,
+  progress?: {
+    onError?: (url, error) => void;
+    onProgress?: (url, event: ProgressEvent<EventTarget>) => void;
+    onFinish?: (url) => void;
+  }
 ): Record<string, any> => {
   const [objects, setObjects] = useState<Record<string, any>>({});
   const [isLoading, setIsLoading] = useState(false);
@@ -93,6 +100,7 @@ export const useParallelLoader = <T,>(
 
     setIsLoading(true);
     const _loader = new loader();
+    loaderInit?.(_loader);
 
     // Create the loading promise
     const promise = (async (): Promise<Record<string, T>> => {
@@ -102,14 +110,15 @@ export const useParallelLoader = <T,>(
             _loader.load(
               url,
               (geometry) => {
+                progress?.onFinish?.(url);
                 resolve({ url, object: geometry });
               },
-              (event) => onProgress?.(url, event),
+              (event) => progress?.onProgress?.(url, event),
               (error) => {
-                if (!onLoadError) {
+                if (!progress?.onError) {
                   console.error(`Error loading ${url}:`, error);
                 } else {
-                  onLoadError(url, error);
+                  progress?.onError(url, error);
                 }
                 resolve({ url, object: null });
               }