How does the camera get updated when head is moving (HMD motion tracking)

[Truemedia]

Hi, I'm currently writing some XR abstractions for vue and trying to use this library as a basis.

I have some base code working with entering VR immersive mode when clicking a button but not sure how to update the Three camera instance I have.

Looking in this codebase and with the lack of documentation it isn't obvious how that happens, I don't see anything like a setAnimationLoop for synching anything.

Could anyone divulge a bit more information on how this achieved would be a big help, thanks.

[CodyJasonBennett]

setAnimationLoop is what you'll need so three.js runs its internal pose and controllers sync in WebXRManager. R3F manages this since it's a bit more complicated when rendering can be interrupted due to its frameloop API.

• https://github.com/pmndrs/react-three-fiber/blob/b15801f161fc046a70d9a9f592b3ea8e3eac3d6e/packages/fiber/src/core/index.tsx#L255

WebXRManager also creates an internal XRCamera where head pose is tracked; the normal camera is not mutated at all. https://threejs.org/docs/#api/en/renderers/webxr/WebXRManager.getCamera

I would familiarize yourself with the WebXR API, but also the WebXR internals of three.js. They're not super scary, just these two regions and know resizing in XR isn't supported (mrdoob/three.js#26905):

• https://github.com/mrdoob/three.js/blob/a9c39d78ce0aa50b02ad77b1c8855ce8b7c2c3b4/src/renderers/WebGLRenderer.js#L1154
• https://github.com/mrdoob/three.js/blob/dev/src/renderers/webxr/WebXRManager.js

[Truemedia]

Thanks i had no idea R3F had XR functionality at the core that's exactly the code I was missing.

Yeh I think I might of been messing around with cameras aswell instead of letting WebXR do some of the heavy lifting.