将 *.GLB 文件分解为 @react- Three/Fiber 中的小部分

Question

我想使用

@react-three/fiber

在我的 React 项目中创建一个 3D 场景，其中向用户显示汽车的 3D 模型，他可以选择一个“汽车部件”（例如引擎盖或前门右侧） ）点击它。

我已经能够使用

PresentationControls

中的

@react-three/drei

显示 3D 模型（从 *.GLB 文件加载）和整个场景。我在这里的障碍是了解我可以使用什么方法来“检测”汽车部件上的点击。

我天真的猜测是每个汽车零件都有一个 *.GLB 文件，并且每个 GLB 文件模型在加载到应用程序中时都将与其他模型完美匹配。这行得通吗？同时加载那么多 GLB 文件会不会有点太重了？您认为在性能效率和实用性方面是否有更好的方法？

谢谢

Answer 1

不，您不需要“加载”单独的 GLB。当然你可以这样做，但温和地说，这是错误的做法。你需要做的第一件事是准备一个汽车模型（我假设你已经有了它）。 然后，在某些程序（例如 Blender）中，将所有要交互的部分分开并命名它们。然后用

.getObjectByName

抓住它们并按照你的意愿操纵它们。

看这个主题如何用 Three.js 可视化 3D CAD 模型及其可移动部件？