How to useLoaders with ObjectURLs?

[GenieTim]

Given some circumstances, my code will not have "ordinary" URLs of the 3D files I would like to include with the various loaders (useLoader with GLTFLoader or STLLoader seems to work fine with normal URLs in my tests), but object URLs.

In the following example, the object URL is created from a file chosen locally (URL.createObjectURL(file)).
Rough example code:

App.tsx

function App() {
  const [model, setModel] = React.useState<string>("");
  const [fileName, setFileName] = React.useState<string>("");
  const [loading, setLoading] = React.useState<boolean>(false);

  function handleFileSelect(event: React.ChangeEvent<HTMLInputElement>) {
    setLoading(true);
    if (event.target.files == null) {
      return;
    }
    const file = event.target.files[0];
    if (file) {
      setFileName(file.name);
      setModel(URL.createObjectURL(file));
      setLoading(false);
    }
  }

  const Model = () => {
    if (!loading) {
      return <Viewer3D src={model} fileName={fileName} />;
    }
    return <div>Loading file...</div>;
  };

  return (
    <div className="App full-height">
      <h1>Example 3D Viewer App</h1>

      <label>
        3D file
        <input type="file" onChange={handleFileSelect} />
      </label>
      <hr />

      <Model />
    </div>
  );
}

Viewer3D.tsx

import { LoaderProto } from "@react-three/fiber";
import React, { FC } from "react";
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
import { PLYLoader } from "three/examples/jsm/loaders/PLYLoader";
import { STLLoader } from "three/examples/jsm/loaders/STLLoader";
import { XYZLoader } from "three/examples/jsm/loaders/XYZLoader";
import ThreeViewer from "../ThreeViewer/ThreeViewer";
import { Viewer3DWrapper } from "./Viewer3D.styled";

interface Viewer3DProps {
  src: string;
  // data?: ArrayBuffer;
  fileName?: string | null;
}

const Viewer3D: FC<Viewer3DProps> = (
  props: Viewer3DProps
) => {
  if (!props.src) {
    return (
      <Viewer3DWrapper>No 3D file specified.</Viewer3DWrapper>
    );
  }

  console.log(`Loading 3D model from ${props.src}`);
  const relevantFileName: string =
    props.fileName || props.src.split("/").pop() || "";
  const fileEnding: string = relevantFileName.split(".").pop() as string;
  let fileType: string = fileEnding;
  if (props.src.startsWith("data:") && !props.fileName) {
    fileType = props.src.split(";")[0].split("/")[1] || "";
  }

  // Attempt to detect file type from content-type header if necessary
  let filetype_regex = /^x\-([a-z]+)\-((bin)|(txt)|(text))$/;
  if (filetype_regex.test(fileType)) {
    const match = filetype_regex.exec(fileType);
    if (match && match.length > 1) {
      fileType = match[1];
    }
  }

  let loader: LoaderProto<unknown> | null = null;

  switch (fileType.toLowerCase()) {
    case "gltf":
    case "glb":
      loader = GLTFLoader;
      // return (
      //   <Viewer3DWrapper>
      //     <GLBViewer src={props.src} />
      //   </Viewer3DWrapper>
      // );
    case "obj":
      loader = OBJLoader;
      break;
    case "fbx":
      loader = FBXLoader;
      break;
    case "ply":
      loader = PLYLoader;
      break;
    case "stl":
      loader = STLLoader;
      break;
    case "xyz":
      loader = XYZLoader;
      break;
    default:
      break;
  }

  if (loader !== null) {
    return (
      <Viewer3DWrapper>
        {/* <GLBViewer src={props.src} /> */}
        <ThreeViewer src={props.src} loader={loader} />
      </Viewer3DWrapper>
    );
  }

  return (
    <Viewer3DWrapper>
      Viewer3D Component. Source with type "{fileType}" is not
      supported.
    </Viewer3DWrapper>
  );
};

export default Viewer3D;

ThreeViewer.tsx

import { Html, OrbitControls, Text, useProgress } from "@react-three/drei";
import { Canvas, LoaderProto, useLoader } from "@react-three/fiber";
import { folder, useControls } from "leva";
import React, { FC, Suspense } from "react";
import { ThreeViewerWrapper } from "./ThreeViewer.styled";
import { BufferGeometry, Scene } from "three";

interface ThreeViewerProps {
  src: string;
  loader: LoaderProto<unknown>;
}

const ThreeViewer: FC<ThreeViewerProps> = (props: ThreeViewerProps) => {
  const { intensity, color } = useControls(
    "Environment",
    {
      Light: folder({
        intensity: {
          min: 0,
          max: 10,
          step: 0.1,
          value: Math.PI / 2,
        },
        color: "#ffffff",
      }),
    },
    {
      collapsed: true,
    }
  );

  const ProgressView = () => {
    const { active, progress, errors, item, loaded, total } = useProgress();
    return <Html center>{progress} % loaded</Html>;
  };

  const Model = () => {
    const modelLoaded = useLoader(props.loader, props.src);

    if (modelLoaded instanceof Scene) {
      return <primitive object={modelLoaded} scale={1} />;
    } else if (modelLoaded.scene && modelLoaded.scene instanceof Scene) {
      return <primitive object={modelLoaded.scene} scale={1} />;
    } else if (
      typeof modelLoaded == "object" &&
      !Array.isArray(modelLoaded) &&
      modelLoaded !== null
    ) {
      return <primitive object={modelLoaded} scale={1} />;
    }

    console.log("Loaded model", modelLoaded);
    return (
      <Text position={[0, 0, 0]} color="red">
        Failed to load model.
      </Text>
    );
  };

  return (
    <ThreeViewerWrapper>
      <Canvas>
        <Suspense fallback={<ProgressView />}>
          <ambientLight intensity={intensity} color={color} />
          <directionalLight />
          <Model />
          <OrbitControls />
        </Suspense>
      </Canvas>
    </ThreeViewerWrapper>
  );
};

export default ThreeViewer;

This somewhat expectedly does not work, the loader fails to parse (e.g. tons of warnings in the console, THREE.OBJLoader: Unexpected line: " and then various non-ascii characters).

However, it is not clear to me what the right way would be to go from these Object URLs to whatever useLoader accepts – any idea would be appreciated.