reactjs - 与 React 三纤维组件作斗争

Question

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

我创建了一个加载 3d 文件的组件，但已经在特别努力地引用和动画它们。

r3f 似乎使一切变得如此不必要的复杂。

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

Answer 1

您可以简单地在某物上放置一个 ref 并通过 useframe 对其进行动画处理，如下所示：https ://codesandbox.io/s/khrmaterialsvariants-forked-mz11v?file=/src/App.js我并没有真正看到复杂性，仅此示例通常是正常情况的 2-3 倍。

您使用 useLoader(FBXLoader, url) （或 drei 的 useFBX shotcut）来加载模型。但是当您将内容作为黑盒转储到场景中时，<primitive object={obj} />您必须遍历内容才能找到它，就像在三个中一样。您可以对原语进行引用并深入了解其内容。我仍然建议使用 gltf，尤其是 gltfjsx 工具，这一切都变得微不足道。

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