Match avatar rotation with joystick

Questions
1

Hi,

I’m trying to implement an onscreen joystick to control a 3D avatar’s movement.

  1. The joystick is from Nipplejs by yoannmoinet
  2. The perspective camera is fixed in place and continuously lookAt at the moving avatar
  3. After the character moves a certain distance, the camera will jump to a position behind the character
  4. I’m using joystick’s radian position for the avatar’s Y rotation

However when I push the joystick 90 degrees, the 3D avatar doesn’t move forward, instead it rotates and moves to the right.

And when the avatar rotates towards a different direction, pushing the joystick 90 degrees results in the avatar again changing to a different direction.

I’ve included a drawing showing the fixed joystick and the above situation.

image
image2794×2069 215 KB

How can I have the avatar’s direction always match the joystick’s rotation / direction?

Thank You!

2

It sounds like you need to offset the rotation by -90 degrees.

yourObject.rotation.y = joystickInput - 1.5708

3

Sorry I forgot to mention that after a certain distance, the camera will move to a position behind the character, so kind of like a third person camera but with a delayed / spring effect. The problem is that after the camera has moved behind the character’s new orientation, pushing the joystick in the same direction changes the orientation of the character.

e.g:

  • In initial position push joystick to radian = 1.57 and character moves forward
  • In new position push joystick to radian = 1.57 and character moves left or right

I need to keep the joystick directions consistent for the character. For example joystick radian = 1.57 always translates the character forward regardless or camera or character orientation. Is this possible?