Any idea how to load a 3DM file using useLoader?

[karimi]

I see that THREE now supports 3DM files which is very neat. Is there a way to use this with useLoader within R3F?

https://threejs.org/examples/?q=3dm#webgl_loader_3dm

[joshuaellis]

Have you tried doing this:

const MyComponent = () => {
  const loadedModel = useLoader(THREE.Rhino3dmLoader, PATH_TO_MODEL)

  return <primitive object={loadedModel} />
}

Or does the Rhino loader need something more specific set?

[karimi]

I tried a few things. Looking at the three.js example it seems like it needs loader.setLibraryPath( 'https://cdn.jsdelivr.net/npm/rhino3dm@0.15.0-beta/' );
https://github.com/mrdoob/three.js/blob/94f043c4e105eb73236529231388402da2b07cba/examples/webgl_loader_3dm.html#L69

I tried the following but still didn't work:

function loadedModel() {
  const object = useLoader(Rhino3dmLoader, "public/rhino_logo.3dm", loader => {
    loader.setLibraryPath("https://cdn.jsdelivr.net/npm/rhino3dm@0.15.0-beta/");
  });
  return <primitive object={object} dispose={null} />;
}

[joshuaellis]

HM. interesting, could you make a sandbox for it? I don't have any 3dM models to hand 😅 and I'll have a look for you.

[karimi]

Hmm I guess all I had to do was to create a sandbox!
It's working. Here's the sandbox for future reference:
https://codesandbox.io/s/r3f-gltf-fonts-forked-i1jjf?file=/src/index.js:199-220

[niklearnstodev]

Nice working and super helpful. Were you able to get orbit controls working with 3dm files?

[andrewringler]

Thanks! Perfect.