CSS FPS视图闪烁和冻结

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

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

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

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

为了记录，如果重要，我正在开发谷歌Chrome 49。

Answer 1

我不敢相信我错过了这个。

之前：

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)。

Answer 2

我相信这是因为你在循环中检测键。相反，使用这个：

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)

希望这可以帮助 ：）