CSS FPS 视图闪烁和冻结

CSS FPS view flickering and freezing

本文关键字：冻结 闪烁 视图 FPS CSS      更新时间：2023-09-26

我正在尝试使用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变换的状态还不存在？

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

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

以前：

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

我相信

这是因为您正在循环中检测键。相反，请使用以下内容：

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)

希望这对:)有所帮助

相关文章：