Navigation joystick in VR

[WarlordCheru]

Hi! I am doing a project and I have a question. Would it be possible for the user when entering VR to use the navigation joystick instead of teleportation?

[AdaRoseCannon]

Yes, I would say in that situation, listen for the user to push forward on the joystick then move the cameraRig in the direction the user is facing.

I personally think teleporting is a better user experience but you do you I'm not a cop

[WarlordCheru]

Thanks for replying so quickly!

I understand what you're saying, but I don't know how to get to that solution, I'm new to a-frame. Could you tell me how to do it? If it's posible.

I appreciate a lot your help.

[AdaRoseCannon]

This solution is for my AFrame Library rather than the AFrame controllers.

You need to make a component that listens for thumbstickmoved events. https://aframe.io/docs/1.3.0/introduction/writing-a-component.html

this.el.addEventListener('thumbstickmoved', this.handleThumbstickAxis)

When the event fires moves the cameraRig in the direction the camera is facing according to event.detail.y (the y coordinate of the thumbstick)

use this code to get the camera's orientation VR

this.el.sceneEl.renderer.xr.getCameraPose().transform.orientation

Probably something like:

init() {
  this.q = new THREE.Quaternion();
  this.offset =  new THREE.Vector3;
  this.speed = 0;
  this.el.addEventListener('thumbstickmoved', e => this.speed = e.detail.y)
},
tick (time,delta) {
  const pose = this.el.sceneEl.renderer.xr.getCameraPose();
  if (!pose) return;
  const orientation = this.q.copy(pose.transform.orientation);
  const offset = this.offset.set(0,0,-3 * delta * this.speed);
  offset.applyQuaternion(orientation);
  offset.y = 0; // don't move camera up or down if user looks up or down
  cameraRig.position.add(offset);
}

That is just a best guess of where I would start from the top of my head, that code probably has mistakes and doesn't run, so don't use it verbatim but should give you an idea of how to do it.

Once you've made the component stick onto any part of the various hands probably on one of the handy-controls elements with data-left="grip" data-right="grip" data-none="grip" elements.

[WarlordCheru]

Many thanks! I see it complicated but I will try it. Let's see if i get it. Again, thank you very much!

[msub2]

@WarlordCheru I've got a very basic smooth locomotion implementation here if you'd like to check it out: https://msub2.github.io/webxr-showcase/2/?content=A-Frame

[AdaRoseCannon]

Thanks for the reply @msub2

[dendrofen]

here is one more A-Frame boilerplate, which is using joystick as a controller in vr https://github.com/inplayo-com/aframe-boilerplate

[AdaRoseCannon]

I totally forgot to mention that I have added joystick navigation via the aframe extra movement controls you can toggle between them using the html form