A-Frame WASD controls substitute on mobile devices

Question

I have an A-Frame multiplayer project, which relies on each user moving around the map, and it works well in desktop browsers. The stumbling block is the lack of motion controls in mobile, like the WASD-controls for the camera.

What workaround would you suggest? Perhaps, adding on-screen buttons and triggering keypress events with jQuery?

Or is there a more straightforward method of adding a function that would change the camera position for each on-screen button press? In this case, is there a way to find the exact functions attributed to the W, A, S, D keys?

Among several things I've tried was:

$(".up-button").click(function(){
  window.dispatchEvent(new KeyboardEvent('keypress',{keyCode: 38}));

And another one:

var e = jQuery.Event("keydown");
e.which = 38;
$(window).trigger(e);

Neither is producing any change.

Answer 1

Have you tried something like:

window.dispatchEvent(new KeyboardEvent('keypress',{keyCode: 38} )  );

to simulate pressing the up arrow key?

You could simulate pressing wasd or up down left right. The rotation might be a little more tricky though, you would have to simulate the onMouseDown and onMouseMove events.

Answer 2

I see what you mean. Most people wouldn't even have a controller to properly move the character in your project/game. I've seen in a demo in A-Frame that is pretty clever in my opinion. Basically if the user is looking down on floor, then the camera moves forward. This is good as it requires no outside input whatsoever so it works on everything.

As how to implement it, this may be a solution:

//First calculate the verticle angle of the camera

     var verticalAngle = getVerticalAngle(camera.getWorldDirection());
        console.log('vertical angle:' + verticalAngle);
        function getVerticalAngle(cameraVector) {
            return vRadiansToDegrees(Math.atan(cameraVector.y));
        }

        function vRadiansToDegrees(radians) {
            return radians * 180 / Math.PI;
        }

And then move the camera forward if the user is looking down on the floor

if (verticalAngle < -43) {
      //move camera
    }