I am attempting to load a 3MF file that you can find here: 3mf-samples/examples/beam lattice/pyramid.3mf at 665e20dc4d7777fd4c9702bca86a2d4028440337 · 3MFConsortium/3mf-samples · GitHub
I am doing it on the following codesandbox:
https://codesandbox.io/p/sandbox/model-loading-test-2ynlw9?file=%2Fsrc%2FApp.js%3A25%2C40
With the code below. The issue is that the item is not loading, resulting in an infinite bounding box.
import { Canvas, ambientLight } from "@react-three/fiber";
import { useEffect, useState, useRef } from "react";
import { Object3D, Box3 } from "three";
import { ThreeMFLoader } from "three/examples/jsm/loaders/3MFLoader.js";
import { Stats, OrbitControls } from "@react-three/drei";
function Test() {
// The file is then passed here
const [objectMesh, setObjectMesh] = useState(new Object3D());
useEffect(() => {
const loader = new ThreeMFLoader();
loader.load("pyramid.3mf", function (obj) {
setObjectMesh(obj);
console.log("Loaded obj");
console.log(obj);
let box = new Box3();
box.setFromObject(obj);
console.log(box);
});
}, []);
console.log("Rendering");
return (
<>
<OrbitControls />
<primitive object={objectMesh} />
</>
);
}
export default function App() {
return (
<div className="App">
<Canvas
style={{
width: "100vw",
height: "100vh",
border: "1px solid red",
backgroundColor: "black",
}}
>
<ambientLight />
<Test />
</Canvas>
</div>
);
}