与React三纤维组件作斗争



我有一个json,里面装满了产品信息、fbx文件的路径等。现在我想基于我的json文件构建一个动态组件,它将我的fbx文件加载到我的画布上。稍后我想引用这些对象,对它们进行分组并设置它们的动画。这在带有react的原生threej中没有问题。但我不知道如何在r3f中实现这一点。

我创建了一个加载3d文件的组件,但已经很难具体引用和设置它们的动画了。

使用r3f,一切似乎都变得如此复杂。

你能告诉我这里的最佳做法是什么吗?

您可以简单地在某个东西上放置一个ref,并通过useframe对其进行动画处理,如下所示:https://codesandbox.io/s/khrmaterialsvariants-forked-mz11v?file=/src/App.js我真的看不出它的复杂性,单是这个例子就会是正常情况下的2-3倍。

使用useLoader(FBXLoader,url((或drei的useFBX快照(加载模型。但是,当您通过<primitive object={obj} />将内容作为黑盒转储到场景中时,您必须遍历内容才能找到它,就像三个一样。您可以在基元上放置一个引用并深入查看其内容。我仍然建议使用gltf,尤其是gltfjsx工具,因为它使这一切变得微不足道。

总的来说,没有什么不同。您可以使用与在纯三中编写的代码完全相同的代码。您不需要useLoader。但这种东西可以为你节省50%的普通样板,这就是它存在的原因。