移动设备上的 A-Frame WASD 控件替代品答案

【问题标题】：A-Frame WASD controls substitute on mobile devices移动设备上的 A-Frame WASD 控件替代品
【发布时间】：2017-10-21 08:43:17
【问题描述】：

我有一个 A-Frame 多人游戏项目，它依赖于每个用户在地图上移动，并且在桌面浏览器中运行良好。绊脚石是移动设备缺乏运动控制，例如相机的 WASD 控制。

您会建议什么解决方法？也许，添加屏幕按钮并使用 jQuery 触发按键事件？

或者有没有更直接的方法来添加一个功能，每次按下屏幕按钮都会改变相机的位置？在这种情况下，有没有办法找到归属于 W、A、S、D 键的确切功能？

我尝试过的几件事是：

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

还有一个：

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

两者都没有产生任何变化。

【问题讨论】：

标签： javascript mobile virtual-reality aframe webvr

【解决方案1】：

您是否尝试过类似的方法：

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

模拟按向上箭头键？

您可以模拟按 wasd 或左上右下。旋转可能有点棘手，您必须模拟 onMouseDown 和 onMouseMove 事件。

【讨论】：

还有为移动设备制作的“onTouch”事件。我要上班了，但会寻找我前几天看到的利用它们的 .js 存储库。您已经等了 18 天没有其他答案。
谢谢！我试过用 div 模拟按键事件，但以前没有运气。我会试试你的线路，让你知道。
我在 ebay 上买了一个便宜的 Mocute 5 美元蓝牙遥控器。我正在尝试使用它来模拟点击。但还是一头雾水。
这也是一种选择！我真的很想在没有额外硬件的情况下解决这个问题，这样任何拥有智能手机的人都可以立即连接并四处走动。我找到了这个 repo，其中包含一个用于触摸控制的脚本，但仍在试图弄清楚如何实现它：github.com/donmccurdy/aframe-extras/tree/master/src/controls
是的，我喜欢用于测试选项的触摸控件，但我的网站在骑车（希望不是开车！）或将手机插入用于完整 3D VR 体验的头戴式显示器。这就是我使用遥控器的原因，在最后一种情况下不得不触摸屏。有关您的多人游戏项目的更多信息会很有帮助（而且很有趣）。

【解决方案2】：

我明白你的意思。大多数人甚至没有控制器来正确移动项目/游戏中的角色。我在 A-Frame 的演示中看到过，我认为这非常聪明。基本上，如果用户向下看地板，那么相机会向前移动。这很好，因为它不需要任何外部输入，所以它适用于一切。

至于如何实现，这可能是一个解决方案：

//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;
        }

如果用户向下看地板，则将相机向前移动

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

【讨论】：

这很巧妙！我会在有时间的时候尝试一下，并让你知道它是怎么回事+发布一个链接。谢谢你的建议。
您是否知道我如何调用精确的函数，使相机沿相机指向的方向平滑移动，就像 W 键一样？
按 W 键时调用的是什么函数？您应该使用与按键相同的功能。我个人使用这个：github.com/brianpeiris/three-firstperson-vr-controls/blob/…，这为我节省了很多时间。
这是一个很好的参考。 A-Frame 的特点是——预装了库存 WASD 机芯，我不太确定在哪里可以找到它。
哦，我知道了，我以前从未使用过 A-Frame，所以我无能为力。