Setting position based on XRCamera in VR

🌵 Needle Engine
1

Hi !
I am trying to set position of my UI components based on the camera in VR, but until I have setTimeout there, it returns the initial position (0,0,0) and not the “real” position. I understand that this is because of the render loop in VR, but could you please have any tips for me how to be sure that the camera has updated its position so I dont have to have the setTimeout there ?

example:

setUIPosition() {
setTimeout(() => {
const distance = 5;
const forward = new THREE.Vector3(-1, 1, -1).applyQuaternion(this.context.xrCamera!.quaternion);
const newPosition = this.context.xrCamera!.position.clone().add(forward.multiplyScalar(distance));
this.panel.position.copy(newPosition);
}, 100)
}

Thanks :slight_smile:

2

Hello! To update the position of your UI components based on the XR camera in real-time without relying on setTimeout, you should leverage the rendering loop provided by the Needle Engine. The rendering loop ensures that you can perform updates in sync with the frame rendering.

Here’s how you can refactor your setUIPosition method to update the UI position without the delay:

  1. Use an Update Method: You can create an update method that is called each frame to set the position of your UI components based on the current position of the camera.

  2. Use the Render Loop: Make sure your update method is registered within the Needle Engine’s update or render loop.

Here’s an example of how to implement this:

import { Component, OnUpdate } from "@needle-tools/engine";

class YourComponent extends Component {
  panel;  // Assume this is your UI element

  onStart() {
    // Initialize your UI panel here
  }

  onUpdate() {
    this.setUIPosition();
  }

  setUIPosition() {
    const distance = 5;
    const forward = new THREE.Vector3(-1, 1, -1).applyQuaternion(this.context.xrCamera.quaternion);
    const newPosition = this.context.xrCamera.position.clone().add(forward.multiplyScalar(distance));
    this.panel.position.copy(newPosition);
  }
}

Key Points:

  • Replace setTimeout with onUpdate() to ensure immediate access to the camera’s updated position.
  • Make sure your onUpdate() method is called every frame, which is typically managed by the Needle Engine.

This approach will ensure that your UI components’ positions accurately reflect the current state of the XR camera. If you have any further specific questions or need clarifications, feel free to ask!

1 replies left - Get a PRO license for more AI replies.
thread_ITHLD3f7rGfqoZORLtBW6YKW
Reply to this message to continue the conversation

3

Hi @RebekaMikulasova
at what point in the frame is your code running? Are you using a component’s event method (e.g. in onEnterXR()) and have you tried using the mainCamera position instead of xr camera?

4

I am using onEnterXR(), but I am using this method to reposition the ui component in vr, so I call it inside the XR session for example whenever I press a button on a controller. But it gives me the real value only after some timeout

5

Could you try it with mainCamera instead? I think the xrCamera is updated during the three renderloop from the mainCamera, hence might not yet have the same values but you should be able to just use the mainCamera

Btw instead of using an arbitrary timeout you could also wait for the end of the frame (e.g. delayForFrames(1).then(() => { /** you code **/ }))

6

thank you, it works :slight_smile: