3MF Loader Module Not Found Error

Questions
,
1

I have the following code on the codesandbox below:

https://codesandbox.io/p/sandbox/model-loading-test-2ynlw9?file=%2Fsrc%2FApp.js%3A1%2C1-35%2C1

Where I attempt to import the ThreeMFLoader

import { Canvas } from "@react-three/fiber";
import { useEffect, useState, useRef } from "react";
import { ThreeMFLoader } from "three/addons/loaders/3MFLoader.js";

function Test({ savedFile }) {
  // The file is then passed here
  console.log("Test Is Rendered");
  console.log(savedFile);
  const [objectMesh, setObjectMesh] = useState();
  useEffect(() => {
    console.log("UseEffect Called");
    let reader = new FileReader();
    reader.addEventListener("loadend", (event) => {
      let result = event.target.result;
      let loader = new ThreeMFLoader();
      let parsedResult = loader.parse(result);
      setObjectMesh(parsedResult);
    });
    reader.readAsArrayBuffer(savedFile);
  }, [savedFile]);
  console.log("Rendering");
  return <primitive object={objectMesh} />;
}

export default function App() {
  const [savedFile, changeSavedFile] = useState(null);
  // When the user uploads a file, it is saved tothe App State
  return (
    <div className="App">
      <input type="file" onChange={(e) => changeSavedFile(e.target.files[0])} />
      <Canvas>{savedFile && <Test savedFile={savedFile} />}</Canvas>
    </div>
  );
}

Why does it cause an import error:

ModuleNotFoundError: Could not find module in path: ‘three/addons/loaders/3MFLoader.js’ relative to ‘/src/App.js’

2

Try putting this before all your other scripts are loaded in the html ?

    <script type="importmap">
    {
        "imports": {
            "three": "https://threejs.org/build/three.module.js",
            "three/addons/": "https://threejs.org/examples/jsm/"
        }
    }
    </script>
3

This is the HTML now with the script you suggested. I am still getting the error.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <title>React App</title>
  </head>
  <body>
    <noscript> You need to enable JavaScript to run this app. </noscript>
    <script type="importmap">
      {
        "imports": {
          "three": "https://threejs.org/build/three.module.js",
          "three/addons/": "https://threejs.org/examples/jsm/"
        }
      }
    </script>
    <div id="root"></div>
  </body>
</html>
4

If you are using a codesandbox, you can install/import three (it’s installed automatically with r3f), and use the following import:
import { ThreeMFLoader } from "three/examples/jsm/loaders/3MFLoader.js"

1 Like