Live controller position

[Marguelgtz]

Hello I am trying to get live position of the controllers to attach an object to them.

Currently I am using the useControllers() hook, it works great at getting the position and rotation data but the values won't update as the controller moves

Btw Currently working on a open sourced project about learning webxr (by building a vr drumkit) and react-xr has been incredibly useful and easy to get up to speed. I'll leave the links if anyone wants to check it out.
https://learning-webxr.now.sh/
https://github.com/Marguelgtz/learning-webxr

const leftController = useController('left')

return (
      {leftController ? (
        <Box
          castShadow
          args={[0.04, 0.04, 0.5]}
          position={[
            leftController.controller.position.x,
            leftController.controller.position.y,
            leftController.controller.position.z,
          ]}
          rotation={[
            leftController.controller.rotation.x,
            leftController.controller.rotation.y,
            leftController.controller.rotation.z,
          ]}
        >
          <meshStandardMaterial color="#966F33" />
        </Box>
      ) : null}
)

[sniok]

Hi, when you pass position like in that example it will only set it during a render (basically once). So you need to synchronize controller position and box position every frame. For that you can use useFrame hook. It will execute a function on every frame. It should look something like this:

const ref = useRef() // Reference for the box instance
const leftController = useController('left')

useFrame(() => {
   // Don't forget to check this, controller may be disconnected
   if(leftController === undefined) return;

   ref.current.position.copy(leftController.controller.position)
   ref.current.rotation.copy(leftController.controller.rotation)
});

return <Box ref={ref} />

[Marguelgtz]

awesome thanks 👍🏼