Rhino3dmLoader in react-three-fiber?

Questions
1

Can anyone get Rhino3dmLoader working with react-three-fiber?

I have the following sandbox example: https://codesandbox.io/s/rhino3dmloader-in-react-three-fiber-vhh1x?file=/src/index.js

I am getting the following error: Uncaught SyntaxError: Unexpected token '<'

I am pretty much just doing:

import { Rhino3dmLoader } from 'three/examples/jsm/loaders/3DMLoader'

...
const model = useLoader(Rhino3dmLoader, url)
2

in threejs rhino needs some extra files to be present in your public folder, it doesn’t just work ootb: Rhino3dmLoader in react-three-fiber (forked) - CodeSandbox

also, the return value is an object3d, containing all the meshes and materials. if you want to put an already existing thing into the scene you use primitive: react-three-fiber/api.md at e925b35f58dea8a98875e2306a5ee85c65cd5e4b · pmndrs/react-three-fiber · GitHub

function Rhino3dmLogo({ url, ...props }) {
  const model = useLoader(Rhino3dmLoader, url, (loader) => loader.setLibraryPath('/rhino3dm/'))
  return <primitive object={model} />
}

always check three docs and examples. the examples can be a bit tough to untangle but they’ll have everything you’re missing if something doesn’t work.

1 Like
3

Thanks! Perfect. Andrew

4

Hey folks! This code pen seems to be broken now. Any ideas on the source? It looks like an error retrieving the Rhino model, but all fo the sources look correct.

5

i deleted it, both the file and the rhino wasm encoder, because i only have 500mb caps on codesandbox. the code is still valid. just put model and wasm into your public, load it.

6

here’s a working example: r3f gltf fonts (forked) - CodeSandbox

1 Like
7

Can I change the color of the 3DM model with an Event like On-Mouse Move?

8

the whole model or the individual meshes in it?

9

Is it possible to get the individual meshes in it? Would it involve useGraph?

10

you can, if you wanted to. everything can be laid out declaratively if you want to alter individual nodes and meshes easily. you can use gltfjsx as a javascript import and feed it the rhino scene, it will return the jsx scene graph which you can then use via useGraph.

11

I’ve imported parse from gltfjsx and passed it the object3D returned from Rhino3dmLoader, and I’m not sure what to do with it next, it returns the jsx as a string?

12

That’s what gltfjsx is for, it extracts the scene graph. Now just remove all the parse stuff, return the jsx and you habe declarative rhino. There’sa hook in Fiber that gives you nodes and materials called useGraph, look for it in the docs.

13

Hello everyone,

I’m currently developing a project where I have my own API serving .3dm files. These files are crucial for displaying 3D models in my Next.js application. I’m exploring options to efficiently render these .3dm files directly in Next.js or convert them to .glb format for display.

If anyone has experience or suggestions on how to achieve this effectively within a Next.js environment, or if there are backend adjustments needed to optimize this process, I’d appreciate any insights or guidance you can provide.

Thank you in advance!