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

1. The joystick is from Nipplejs https://github.com/yoannmoinet/nipplejs
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.

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

Thank You!