与 React 三种纤维组件作斗争

Struggling with React Three Fiber Components

我有一个 json 充满了产品信息、fbx 文件的路径等。现在我想构建一个动态组件,基于我的 json 文件,加载我的fbx 文件到我的 canvas。稍后我想引用这些对象,将它们分组并为它们制作动画。 这在带有反应的原生 threejs 中没有问题。但我不知道如何在 r3f 中实现这一点。

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

对于 r3f,一切似乎都变得如此复杂。

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

您可以简单地在某物上放置一个 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% 的常用样板,这就是它存在的原因。