Add drag-and-drop support for 3D assets

[nisshi-dev]

Triplex excels at adjusting meshes, cameras, and lighting in existing R3F scenes. However, when creating new scenes, drag-and-drop import for 3D assets (like those from Blender) would greatly improve the workflow.

Proposed Solution

When dragging .glb or .gltf files into the editor, automatically process them using gltfjsx to generate React components. This maintains the code-first approach while making asset importing intuitive.

P.S.
Thank you to all contributors for this amazing tool!!
I'm excited to see Triplex help the R3F community thrive.

[itsdouges]

Sounds fun! Would you be interested in putting up a proof of concept? :-)

[nisshi-dev]

Sounds fun! Would you be interested in putting up a proof of concept? :-)

Thanks for the reply!
However, I'm quite busy with work through the end of next month. Once things settle down, I'll submit a PR!

[itsdouges]

the start of this is being contributed here #376

we can extend it to support glb files and more too!

[Bellian]

The biggest question will be, how to add the code for the model importer.

• use @react-three/fiber useLoader and then add the primitive

  • pro: we only change the loaded component
  • contra: harder to inject and clean up. even if you remove the primitive, the loader is still in the component

• In @react-three/drei we would have the possibility to load models via components.

  • pro: easy to add to the existing scene
  • contra: @react-three/drei as hard dependency

• Adding triplex helper components to the project if required.
  We can just create a FBXLoader component to the scene, and just use this.

  • pro: easy, after adding the loader it would be extendable.
  • contra: does introduce sideeffects (creates files outside the edited component)
    unsure here to put them

[itsdouges]

file / component drag and drop into the scene is now available so we're unblocked for this one

i'd say just start simple and load via the drei Gltf component for now and we can scale up to more advanced use cases, wdyt?