reactjs 我可以在React js - Three Fiber中与我的3D模型的不同组件交互吗?

vlju58qv  于 2022-12-03  发布在  React
关注(0)|答案(2)|浏览(156)

我有3D球体和链接作为不同的网格组件。我可以旋转链接网格周围我的球体没有这个球体?
My 3d model
我想分别与链接网格和球体网格交互,并分别旋转球体和链接。

3wabscal

3wabscal1#

好吧好吧好吧,我找到了解决办法,我想感谢@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对象的组件的对象中获取子对象。所以......就这样!谢谢!

xoefb8l8

xoefb8l82#

如果对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

相关问题