pmndrs / react-xr

🤳 VR/AR with react-three-fiber
https://npmjs.com/@react-three/xr
MIT License
1.98k stars 137 forks source link

[Question] useHitTest for fixed-axis grabbing. #261

Closed laffan closed 1 year ago

laffan commented 1 year ago

Hi! I'm working on controlled interactions, like limiting grab to the X/Z axis. Currently it works great just offsetting controller position, but I'd like the control point to be the ray intersection rather than controller offset.

useHitTest seems like it would be a good fit for this. I've got a working example of the offset solution here : https://codesandbox.io/s/r3f-xr-drag-demo-sg3krv?file=/src/App.js

Given @sniok 's suggestion above, I thought I might be able to adjust that and make it something like this :

const hit = useRef()
useHitTest(hit => hit.current = hit);

   useFrame(() => {
    const controller = grabbingController.current
    const group = groupRef.current
    if (!controller) return

    const newPosition = new THREE.Vector3().copy(group.position)
    newPosition.x = hit.current.position.x
    newPosition.z = hit.current.position.z

    // Set the Y position of the new vector to the current Y position of the group
    newPosition.y = group.position.y

    // Set the new position of the group
    group.position.copy(newPosition)
    previousTransform.copy(hit.current.matrixWorld).invert()
  })

But this causes the headset to go dark. I have no idea what's going on there don't seem to be a lot of resources for this at the moment. Can someone with a bit more experience than me help? Thanks in advance!

Update : I somehow missed that useHitTest is just for AR. 🤦‍♂️