我可以在 React js - Three Fiber 中与 3d 模型的不同组件交互吗？答案

【问题标题】：Can I interact with different components of my 3d model in React js - Three Fiber?我可以在 React js - Three Fiber 中与 3d 模型的不同组件交互吗？
【发布时间】：2022-12-01 01:35:21
【问题描述】：

我有 3d 球体和链接作为不同的网格组件。我可以在没有这个球体的情况下围绕我的球体旋转链接网格吗？

My 3d model

我想分别与链接网格和球体网格交互，并分别旋转球体和链接。

【问题讨论】：

标签： javascript reactjs 3d blender react-three-fiber

【解决方案1】：

如果你对 jsx https://gltf.pmnd.rs/ 使用 gltf，你可以使用：

<mesh onClick={handleClick}/>

该模型将分解为声明性部分，您可以在之后逐一修改。

要通过拖动来旋转网格的某些部分，最简单的方法是使用 Gesture 包，基本的管道是这样的：

// mesh / object reference 
const ref = useRef()
// cursor movement XY delta
const delta = useRef(null)

useFrame(() => {
  if (delta !== null)
    ref.current.rotation.set([delta.x,delta.y, 0])
})

return ( <…
  <mesh ref={ref}/>
…/>)

请注意，您需要设置delta.current = { x, y } 自己在某个地方

拖动https://use-gesture.netlify.app/docs/options/#transform的那个例子

【讨论】：

非常感谢您的回答！但是如果我想通过滚动事件来旋转一些组件呢？我如何获取组件实例以与之交互？是否可以从 gltf 模型中获取实例，例如：<code> import model from "./sphere.gltf";让 mesh = model.nameMesh; useFrame((state, delta) => (mesh.current.rotation.y -= 0.1001 * Math.PI / 180)); </代码>
是的，这应该是可能的，但你必须进行反向遍历。 jsx 的 gltf 使它变得更加简单。它会给你这个你可以参考的原语
discourse.threejs.org/t/… 这是反向遍历的样子（不确定这是否适合你）
谢谢，我已经通过将所有对象输出到控制台找到了解决方案，我通过以下代码完成了它：useFrame((state, delta) => (ref.current.children[1].rotation.y -= 0.1001 * Math.PI / 180));

【解决方案2】：

好吧好吧好吧，我找到了解决方案，我要感谢@antokhio，他让我思考:)

我的解决方案：

useFrame((state, delta) => (ref.current.children[0].rotation.y -= 0.1001 * Math.PI / 180));
useFrame((state, delta) => (ref.current.children[1].rotation.z += 0.1001 * Math.PI / 180));

如您所见，我们只是从具有 3d 对象组件的对象中获取子项。所以……就这样吧！谢谢！

【讨论】：