Parsing input arbitrary three.js scene graph to component tree

[jo-chemla]

Hi there,
I've got a use-case of an r3f app where I'd like users to be able to upload gltf files and parse them on the fly to JSX react components representing the scene graph tree - in order to pass them to a theatrejs SheetProvider to make the objects props editable.

This looks very similar to pmndrs/gltf-react-three, where I would parse the input glb/gltf to a threejs scene object3d via gltfLoader.load(gltf_url, process), and then convert that threejs scene/object3d object into a JSX component tree on the fly. The reason behind this on-the-fly client-side conversion would be to convert the r3f component tree to a theatrejs editable component tree to pass to a theatrejs SheetProvider, and let the user upload any glb to process it this way.

I've seen from this issue that gltfjsx is purely made for printing/outputting to string, and my testing leads to the same conclusion. Does this repo or another pmndrs tool fills that need or should I write this parsing function myself? Thanks for the reply!

[cyango]

Looking for the same answer!

[donmccurdy]

I think the important nuance here is that JSX does not exist at runtime, it is all compiled out of the application. What you could do, certainly, would be to create a pre-written React component that dynamically and recursively mounts child components for an input three.js scene graph, including Theatre's Editable types. That work is probably unrelated to glTF — all it needs to take as input is a three.js scene graph, the source of that scene does not matter. Perhaps that's a goal of https://github.com/pmndrs/gltf-react-three, I'm not sure.

I would note that theatre.js tends to be picky about letting you redefine any previously-created Editable types, requiring a full reload in some cases. Depending on the use case that might or might not be an issue.

[jo-chemla]

Thanks for that feedback, indeed this would probably be the way to go - parsing an input threejs scene into a component tree. Will follow the discussion here which is specific to parsing an input threejs scene as a theatrejs component tree.

I'll rename the thread from Use the standalone parser to output JSX component on-the-fly to Parsing input arbitrary three.js scene graph to component tree in case it make sense in that gltfjsx repo - otherwise, feel free to close that discussion!

Note full reload from theatre wouldn't be an issue in that case.