我能否与我的3d模型的不同组件交互反应js-3纤维？

Question

我有三维球和连接周围作为不同的网格组件。我可以在没有这个球体的情况下在我的球体周围旋转链环网格吗？

我的3d模型

我想要分别与链接，网格和球面网格，旋转分别球面和链接。

Answer 1

如果在jsx https://gltf.pmnd.rs/中使用gltf，则可以使用：

<mesh onClick={handleClick}/>

模型将被分解成声明式的部分，你可以一个一个地修改之后。

要通过拖动旋转网格的某些部分，最简单的方法是useGesture包，基本管道如下所示：

// 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的示例

Answer 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对象组件的对象中获取子对象。所以..。就这样!谢谢!