How to synchronize the forward direction of the virtual joystick with the camera's orientation?

我的虚拟摇杆是使用html+css+JavaScript编写的,我想知道:无论人物现在朝向那边,只要相机朝向哪边人物就往相机朝向移动,并且摇杆能使人物前后左右各个方向移动。目前我移动摇杆前进,我的人物模型只固定朝向一个方向,无论我相机朝向哪边

Hello and welcome :slight_smile:

I edited your Chinese title, I let you edit again if not accurate.
Please write in English, or use https://www.deepl.com/ if you are no english speaker, so we can help.


DeepL translation of your post

I am using html+css+JavaScript to write my virtual joystick. I would like to know: no matter which way the character is facing now, as long as the camera is facing which way the character moves towards the camera direction, and the joystick can make the character move in all directions, front and back, left and right. Currently when I move the joystick forward, my character model is only fixed to face one direction, no matter which way my camera is facing!


Assuming you are using an ArcRotateCamera, you need to compute a global direction, given your Joystick input, and your camera angle. There are multiple ways, but here is an example :

// Player angle (X, Y are the Joystick Input)
const angle = Math.atan2(X, Y) - camera.alpha + deltaAngle;
// Player move
const dx = speed*Math.sin(angle);
const dz = speed*Math.cos(angle);

Here deltaAngle is a constant angle that you would choose to match your player geometry, to have him facing the direction (most likely multiple of Math.PI/2)


I let you have a look at the doc, also a lot of posts on the forum are dealing with 3rd person character movement


++
Tricotou

1 Like

Hello, I tried your method and now my joystick direction has followed the camera’s orientation change, which makes me happy that the method you provided worked! Thank you. But one problem is that the model is not moving towards the camera orientation! I didn’t add deltaAngle because I didn’t understand what you meant by this variable. Maybe it is this variable that is causing the model not to move towards the camera, can you explain what this variable means, thank you!

basically const angle = Math.atan2(X, Y) - camera.alpha solves the problem of getting the right angle regarding the current camera orientation.

Adding +deltaAngle ables to choose the right orientation, based on if your model is facing +X, -X, +Z, -Z by default (when rotation.y == 0)


Have a look at this Playground to better understand (I replaced the joystick by keyboard arrows, but at the end it’s the same)

(You can ignore the smooth factor compute from line 108 to 111 which is a trick of mine to smooth out an angle in a 2D plane :wink: )

1 Like

Hi brother, I didn’t pay attention to your reply below explaining what deltaAngle means. I was the one who didn’t pay attention to see it, sorry, now I added math.PI/2 which solved my problem perfectly! Brother you are amazing, thank you so much, the problem that confused me for a long time is finally solved, thank you so much.

Thank you brother! Full marks for the answer, thanks so much!

1 Like