33

我正在使用Copperlicht，我想创建一个可用的 FPS。演示控件显示了为什么浏览器环境让这很痛苦。

为了实现 FPS 相机控制，您需要跟踪鼠标的相对位置——换句话说，它的运动，而不是它的绝对屏幕坐标。鼠标可以随时离开浏览器（这是理所当然的）并且无法被跟踪，除非用户在页面内发起拖动事件。单击事件更改焦点并阻止应用程序使用鼠标数据作为输入。

在拖动过程中可以跟踪鼠标位置，但这需要用户按住鼠标左键。这不好，因为左键单击通常用于其他事情。按住按钮也很累而且很麻烦。

我唯一能想到的就是自动化鼠标中键。按下鼠标中键将焦点保持在浏览器中，并将浏览器窗口外的左/右键单击事件保持在浏览器的焦点中。是否可以使用 JavaScript 使鼠标中键保持按下状态？

如果没有，是否有“纯”解决方案？我宁愿不使用 Flash 或 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

我们需要窗口能够捕获鼠标，就像在一些浏览器插件中看到的那样，可能在 Java 中。Flash没有这种能力，AFAIK。

作为旁注，当捕捉到“让鼠标回来”时，您必须按 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

此时此刻 ：

我用 glmatrix 0.9 和版本 2.0 webgl & glmatrix 制作了一个推/弹出矩阵。秘密 -必须平移到零，旋转然后平移到地图位置。您拥有第一人称控制器的所有参数。

请参阅：opengles 1.1。/webgl 1.0 / glmatrix 0.9 或查看这个完整的例子。

WebGl 2 / glmatrix 2 示例（也是第一人称控制器）：

从 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 );

.... 绘图结束功能

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 对象和文件夹。在一个对象一行的原则下。webgl 3d wourld 引擎框架 zlatnaspirala 第一人称网站外观。使用的库：WebGL 的高性能矩阵和向量运算

于 2013-06-23T14:06:33.597 回答
0

在这个时间点（2011 年 10 月），获得真正的第一人称射击风格控件的唯一方法是通过浏览器插件。根据您的需要，您可能还可以像我目前在Quake 3 演示中使用的那样简单的点击和拖动方案，但如果您正在构建一个实际的游戏而不是一个漂亮的技术演示，这可能是不够。

（注意：这实际上是 Google 为他们的 Quake 2 的 GWT 端口所做的。你必须使用 CTRL 键来触发，因为点击是用来移动你的视图。）

然而，在不久的将来，我们应该会收到一个基本上为此目的定制的“MouseLock”API。你可以在Seth Ladd 的博客上阅读它的进展。一旦出现，我们将有更多可供我们使用的游戏控制选项。（也有助于RTS游戏之类的事情）

于 2011-10-03T22:37:17.950 回答
0

（这是迄今为止我见过的唯一可以适用于我的游戏项目的解决方案，也可以进行 FPS）

为您打算支持的每个浏览器实现一个插件。AFAIK，这就是他们解决“Quake Live”问题的方式。

铬/铬-> PPAPI

Firefox 和 Opera -> NPAPI

IE -> ActiveX

Safari -> Safari 插件开发

顺便说一句，Daniel Baulig 给你的链接有一个很好的指针并解决了这个问题（从长远来看）。

于 2011-06-17T15:01:09.760 回答