モバイルデバイス上のA-Frame WASDコントロール代替機能

Question

マップを移動する各ユーザーに依存する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); 

どちらの変更を生産しています。アップ矢印キーを押してシミュレートする

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

：

Answer 1

はあなたのような何かを試してみましたか？

wasdを押すか、または左下を上にしてシミュレートすることができます。 しかし、回転は少し難しいかもしれませんが、 あなたはonMouseDownとonMouseMoveイベントをシミュレートする必要があります。

Answer 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 
    }