0

I have a json filled with product-infos, path to the fbx-files, etc. Now I want to build a dynamic component, based on my json file, which loads my fbx-files onto my canvas. I later want to reference the objects, group these and animate them. This was no problem in native threejs with react. But I have no idea how to achieve this in r3f.

I created a component loading the 3d files, but already struggled referencing and animating them specifically.

Everything seems so unneccessary complicated with r3f.

Can you tell me what would be best practice here?

tinytree
  • 1,009
  • 2
  • 12
  • 28

1 Answers1

0

you can simply put a ref on something and animate it via useframe, like so: https://codesandbox.io/s/khrmaterialsvariants-forked-mz11v?file=/src/App.js i don't really see the complexity, this example alone would be 2-3 times as much normally.

you use useLoader(FBXLoader, url) (or drei's useFBX shotcut) to load a model. but when you dump the contents into the scene as a blackbox via <primitive object={obj} /> then you must traverse stuff to find it back, just like in three. you can put a reference on the primitive and dive through its contents. i would still recommend using gltf and especially the gltfjsx tool, which makes that all trivial.

overall, there's no difference. you can use the exact same code that you would have written in plain three. you don't need useLoader. but this stuff can save you 50% of the usual boilerplate, that's why it exists.

hpalu
  • 1,357
  • 7
  • 12
  • thanks for the answer. I understand, that it makes a lot of things easier. I used to work with classes in React instead of functions. Do I have to get used to a functional workflow again? – tinytree Nov 26 '20 at 09:35
  • Can you provie a simple button in your example, transforming the shoe? That would help me a lot I think. – tinytree Nov 26 '20 at 09:49