Question

我正在尝试使用CSS制作基本的FPS视图。

这是我到目前为止的演示：https://jsfiddle.net/w8q7xtmL/

特别是，动作就像检测按键一样简单，然后：

// "self" is if the player object
requestAnimationFrame(step);
function step() {
  if( keys[37]) self.direction += 2;
  if( keys[39]) self.direction -= 2;
  if( keys[38]) {
    self.x += Math.cos(self.direction/180*Math.PI) * 4;
    self.y -= Math.sin(self.direction/180*Math.PI) * 4;
  }
  if( keys[40]) {
    self.x -= Math.cos(self.direction/180*Math.PI) * 4;
    self.y += Math.sin(self.direction/180*Math.PI) * 4;
  }

  self.camera.style.transform = "rotateX(90deg) rotateZ("+(self.direction-90)+"deg) translate(-"+self.x+"px,-"+self.y+"px)";

  requestAnimationFrame(step);
}

这很有效，但有几个问题。

有时，元素无法正确堆叠。例如，当墙壁阻挡视线时，地板将是可见的。
其他时候，尽管控制台中没有错误或任何表示失败的错误，视图仍会完全冻结。它只是...停止。有时候我可以通过试图移动一下来解决问题。它，但有时我只需要重新加载页面。

我的方法中是否有任何明显的错误，或者3D转换的状态还没有出现在这种情况中？

为了记录，如果重要，我将使用Google Chrome 49进行开发。

Answer 1

我相信这是因为您正在循环中检测键。而是使用此：

var rotval = 0;

    window.addEventListener('keydown', function(e) {
    key = e.keyCode
    if(key === "left")
    {
    rotval = 1;
    }
    }, true);
    window.addEventListener('keyup', function(e) {
    key = e.keyCode
    if(key === "left")
    {
    rotval = 0;
    }
    }, true);

然后只需将变量添加到循环函数中，当它大于或小于0时，它将移动或旋转摄像机！

    function loop()
    {
    camera.rotation.y += rotval
camera.position.x //and so on    
}
    setInterval(loop,30)

希望这会有所帮助：）

Answer 2

我简直不敢错过。

之前：

self.camera.style.transform = "rotateX(90deg) rotateZ("+(self.direction-90)+"deg)
             translate(-"+self.x+"px,-"+self.y+"px)";

之后：

self.camera.style.transform = "rotateX(90deg) rotateZ("+(self.direction-90)+"deg)
             translate("+(-self.x)+"px,"+(-self.y)+"px)";

有趣的是，当self.x为负数时，您会得到translate(--12px,0px)，这是无效的。

CSS FPS视图闪烁和冻结

2 个答案: