Problem when I try to load a 3MF model

Questions
,
1

When I try to load a 3D model from a .3mf file format the following error occurs:

three.module.js:4698 Uncaught TypeError: Cannot read properties of undefined (reading ‘center’)
at Sphere.copy (three.module.js:4698)
at Frustum.intersectsObject (three.module.js:12293)
at projectObject (three.module.js:26304)
at projectObject (three.module.js:26349)
at WebGLRenderer.render (three.module.js:26122)
at render$1 (react-three-fiber.esm.js:1273)
at react-three-fiber.esm.js:1292
at Map.forEach ()
at loop (react-three-fiber.esm.js:1289)

The same happens when I have tried with an .obj file format.

This is the code of the component that creates the 3D object with the data from the file:

import React, { useRef } from "react";

import { useLoader } from "@react-three/fiber";

import { ThreeMFLoader } from "three/examples/jsm/loaders/3MFLoader";

import model from "../assets/crab.3mf";

const Model = () => {

  const geom = useLoader(ThreeMFLoader, model);

  const ref = useRef();

  return (

    <mesh ref={ref} >

      <primitive object={geom} attach="geometry" />

      <meshLambertMaterial color="#00ff00" />

    </mesh>

  );

};

export default Model;

Someone who can help me?
Thanks in advance

2

@Efrain_Rodriguez ThreeMFLoader return a Group 3d object not bufferGeometry, so it doesn’t have centre property that is why you see that error. Try the below code as an example and see if that works.

import model from "../assets/crab.3mf";

const Model = () => {
  const groupRef = useRef();
  const meshRef = useRef();
  const threeMFGroup = useLoader(ThreeMFLoader, model);

  useEffect(() => { 
   const box = new Three.Box3().setFromObject(threeMFGroup);
   const center = new Three.Vector3();
   box.getCenter(center);
   threeMFGroup.position.sub(center);
   groupRef.current.add(threeMFGroup);
  }, [threeMFGroup]);

  return ( 

    <mesh ref={meshRef} >
      <group ref={groupRef}>
          <meshLambertMaterial color="#00ff00" />
       </group>
    </mesh>

  );
}
1 Like