3MF object has infinite bounding box post-loading

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:


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) {
      console.log("Loaded obj");
      let box = new Box3();
  }, []);
  return (
      <OrbitControls />
      <primitive object={objectMesh} />

export default function App() {
  return (
    <div className="App">
          width: "100vw",
          height: "100vh",
          border: "1px solid red",
          backgroundColor: "black",
        <ambientLight />
        <Test />

It seems the loader is not able to parse the geometry data from the 3MF asset. Hence you get an empty group object with no meshes defined. If you compute a bounding box with this input, the AABB keeps its default values.


After some debugging it seems the model makes use of the 3MF Beam Lattice Extension extension which the loader does not support.

1 Like