33

私はCopperlichtを使用しており、使用可能な FPS を作成したいと考えています。デモコントロールは、ブラウザー環境がこれを困難にする理由を示しています。

FPS カメラ制御を実装するには、相対的なマウス位置、つまり絶対画面座標ではなく、マウスの動きを追跡する必要があります。ユーザーがページ内でドラッグ イベントを開始しない限り、マウスはいつでも (当然のことながら) ブラウザーから離れることができ、追跡することはできません。クリック イベントはフォーカスを変更し、アプリケーションがマウス データを入力として使用するのを防ぎます。

ドラッグ中にマウスの位置を追跡できますが、これにはユーザーがマウスの左ボタンを押したままにする必要があります。通常、左クリックは他の目的で使用されるため、これは良くありません。ボタンを押しっぱなしにするのも面倒で疲れます。

私が考えることができる唯一のことは、マウスの中ボタンを自動化することです。マウスの中ボタンを押すと、ブラウザーにフォーカスが保持され、ブラウザー ウィンドウの外側の左/右クリック イベントがブラウザーのフォーカスに保持されます。JavaScript を使用してマウスの中ボタンを押したままにすることは可能ですか?

そうでない場合、これに対する「純粋な」解決策はありますか? 答えとして、フラッシュ、Java、またはプラグインには行きたくありません。

4

8 に答える 8

4

このスレッドは、このトピックに関する素晴らしい読み物です。この機能のプロトタイプは、少なくともFirefoxとChromeに対して提案されているようです。

于 2011-05-14T20:28:17.050 に答える
3

ウィンドウをフルスクリーンにして、カーソルがウィンドウの外に移動した場合にゲームを一時停止するのはどうですか？これで問題が実際に解決するわけではないことはわかっていますが、なんらかのプラグインを使用せずに考えることができる最善の方法です。

于 2011-05-14T10:23:33.323 に答える
1

一種の不正行為ですがabout:flags、Chrome に移動して「FPS カウンター」を有効にするとうまくいきます:) (ただし、すべてのブラウザーや WebGL アプリ内でそれを行うわけではありません)。

于 2011-05-20T22:18:55.850 に答える
0

(これは、これまでに見た唯一のソリューションであり、FPS も実行して、私のゲーム プロジェクトで機能する可能性があります)

サポートするブラウザごとにプラグインを実装します。私の知る限り、これが彼らが「Quake Live」の問題を解決した方法です。

クロム / クロム -> PPAPI

Firefox & Opera -> NPAPI

IE -> ActiveX

Safari -> Safari プラグイン開発

ところで、Daniel Baulig が提供したリンクには優れたポインタがあり、この問題を (長期的には) 解決します。

于 2011-06-17T15:01:09.760 に答える
0

一部のブラウザー プラグイン (Java など) で見られるように、マウスをキャプチャできるウィンドウが必要です。Flash にはこの機能がありません。

補足として、「マウスを元に戻す」ためにキャプチャされた場合、ESC を押す必要があります。これは、アプリがユーザーに適切に通知しない場合に迷惑になる可能性があります。

于 2011-05-17T15:20:04.157 に答える
0

このサンプル コードは http://bitdaddys.com/javascript/example3run.htmlにあります。

 <html>
<head>
<title>JavaScript Example of Mouse Position Tracking</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<form name=thisform>
<table border=0>
<tr><td colspan=2>Position Of Cursor</td></tr>
<tr><td>X <input type=text name=x value=""></td>
    <td>Y <input type=text name=y value=""></td>

</tr>
</table>
</form>

<script type=text/javascript>
    var isIE = document.all?true:false;
    if (!isIE) document.captureEvents(Event.MOUSEMOVE);
    document.onmousemove = getMousePosition;
    function getMousePosition(mp) {
      var _x;
      var _y;
      if (!isIE) {
        _x = mp.pageX;
        _y = mp.pageY;
      }
      if (isIE) {
        _x = event.clientX + document.body.scrollLeft;
        _y = event.clientY + document.body.scrollTop;
      }
      document.thisform.x.value=_x;
      document.thisform.y.value=_y;
      return true;
    }
</script>


</body>
</html>
于 2011-05-17T09:42:44.853 に答える
0

現時点 (2011 年 10 月) では、本物のファースト パーソン シューター スタイルのコントロールを取得する唯一の方法は、ブラウザー プラグインを使用することです。必要に応じて、Quake 3 デモで現在使用しているような単純なクリック アンド ドラッグ スキームを使用することもできますが、かなり技術的なデモではなく実際のゲームを構築している場合、これはおそらく十分ではありません。

(注: これは実際に、Google が Quake 2 の GWT ポートに対して行ったことです。ビューの移動にはクリックが使用されるため、起動するには CTRL キーを使用する必要があります。)

ただし、近い将来、基本的にこの目的のためにカスタムビルドされた「MouseLock」API を受け取る予定です。その進行状況はSeth Ladd's Blogで読むことができます。それが明らかになれば、ゲーム コントロールの選択肢がさらに増えるでしょう。（RTSゲームなどにも役立ちます）

于 2011-10-03T22:37:17.950 に答える
0

いまここで ：

glmatrix 0.9 とバージョン 2.0 の webgl & glmatrix を使用して、プッシュ/ポップ マトリックスを作成します。Secret -ゼロに変換し、回転してから、マップの位置に変換する必要があります。一人称コントローラーのすべてのパラメーターがあります。

参照: opengles 1.1。/ webgl 1.0 / glmatrix 0.9 または完全なコリジョンでこの例を参照してください。

WebGl 2 / glmatrix 2 の例 (First Person コントローラーも):

bitBucketからダウンロード

実際の例

文脈外： 

////////////////////////////////////////////////////////
// Somewhere in draw function  ....
////////////////////////////////////////////////////////

mat4.identity(object.mvMatrix);
this.mvPushMatrix(object.mvMatrix,this.mvMatrixStack);

    ////////////////////////////////////////////////////////
    if (App.camera.FirstPersonController==true){camera.setCamera(object)}

    ////////////////////////////////////////////////////////
    mat4.translate(object.mvMatrix, object.mvMatrix, object.position.worldLocation );
    mat4.rotate(object.mvMatrix, object.mvMatrix, degToRad(object.rotValue), object.rotDirection.RotationVector );

.... End of Draw 関数

SetCamera の内容: 

var camera = new Object();

/* Set defaults                                  */
camera.pitch     = 0;
camera.pitchRate = 0;
camera.yaw       = 0;
camera.yawRate   = 0;
camera.xPos      = 0;
camera.yPos      = 0;
camera.zPos      = 0;
camera.speed     = 0;
camera.yawAmp    = 0.05;
camera.pitchAmp    = 0.007;

keyboardPress = defineKeyBoardObject();

camera.setCamera = function(object) {
    /* Left Key  or A                            */
    if (keyboardPress.getKeyStatus(37) || keyboardPress.getKeyStatus(65) ||  App.camera.leftEdge == true) {

        camera.yawRate = 20;
        if (App.camera.leftEdge == true) camera.yawRate = 10;
    }
    /* Right Key or D                            */
    else if (keyboardPress.getKeyStatus(39) || keyboardPress.getKeyStatus(68) ||  App.camera.rightEdge == true) {

        camera.yawRate = -20;
        if (App.camera.rightEdge == true) camera.yawRate = -10;
    }
    else {
       // camera.yawRate = 0;
    }



    /* Up Key    or W                            */
    if (keyboardPress.getKeyStatus(38) || keyboardPress.getKeyStatus(87)) {
        camera.speed = 0.03;
    }
    /* Down Key  or S                            */
    else if (keyboardPress.getKeyStatus(40) || keyboardPress.getKeyStatus(83)) {
        camera.speed = -0.03;
    }
    else {
        camera.speed = 0;
    }
    /* Page Up
    if (keyboardPress.getKeyStatus(33)) {
        camera.pitchRate = 100;
    }
    /* Page Down
    else if (keyboardPress.getKeyStatus(34)) {
        camera.pitchRate = -100;
    }
    else {
        camera.pitchRate = 0;
    }
    */
    /* Calculate yaw, pitch and roll(x,y,z) */
    if (camera.speed != 0) {

        camera.xPos -= Math.sin(degToRad(camera.yaw)) * camera.speed;
        camera.yPos = 0;
        camera.zPos -= Math.cos(degToRad(camera.yaw)) * camera.speed;

    }
    camera.yaw   += camera.yawRate   * camera.yawAmp   ;
    camera.pitch += camera.pitchRate * camera.pitchAmp ;

    mat4.rotate(object.mvMatrix, object.mvMatrix, degToRad(-camera.pitch), [1, 0, 0]);
    mat4.rotate(object.mvMatrix, object.mvMatrix, degToRad(-camera.yaw), [0, 1, 0]);

   // mat4.translate(object.mvMatrix, object.mvMatrix, [camera.yaw, -camera.pitch, 0]);
     mat4.translate(object.mvMatrix, object.mvMatrix, [-camera.xPos , -camera.yPos  , -camera.zPos ]);

    camera.yawRate   = 0;
    camera.pitchRate = 0;
};

このコードを使用すると、3D オブジェクトとフォルダーを簡単かつ迅速に描画できます。1 つのオブジェクト 1 行の原則の下で。webgl 3D 世界エンジン フレームワーク zlatnaspirala 一人称 Web サイトの外観。使用ライブラリ : WebGL の高性能行列およびベクトル演算

于 2013-06-23T14:06:33.597 に答える