Question

我不确定是否有其他人在使用three.js时遇到此问题。我有一个simple demo的立方体，它会以不同的旋转速度旋转（箭头键，鼠标或触摸输入）。在Chrome浏览器中，一切似乎都很棒。在工作中，我跳上了iMac，纹理似乎在拼接，而不是在Safari中正确映射到我的几何体。

我转移到Mac上的Firefox浏览器，一切正常，帧速率也不错。看起来由于某种原因，当立方体以某个角度旋转时，渲染器会跳跃并且屏幕上的hud向上移动，您无法在顶部看到标题，并且stats小部件从屏幕底部向上移动。似乎我的立方体的y位置同时跳起来。我似乎在某些移动浏览器的android中遇到了同样的问题。我想知道是否有人在Firefox（在Mac上）或移动浏览器中有类似的问题，渲染突然跳跃，移动屏幕上的hud等等

编辑：我已经找到了问题所在。我仍然没有一个理想的解决方案。我创建了我的演示版的副本，并尝试评论我的键盘处理代码，令我惊讶的是这个问题仍然存在。显然，firefox会轻微地向上和向下滚动窗口，THREEx library中包含的键盘处理程序不会禁用Firefox中向上和向下箭头键的默认行为。在chrome中没有滚动窗口的空间，我只是将渲染器设置为窗口的大小。我不明白为什么firefox会滚动。

Answer 1

我在你的例子中在Mac上的Firefox上试验了同样的问题。

渲染的跳转归因于垃圾收集器（在Firefox上实现不当）。您正在为每个“animate”功能分配内存。

不是为旋转创建新的Vector3 / Matrix4，而是使用全局变量，因此您只需创建一次这些对象。

此外，不是使用KeyboardState，而是在每个动画调用上执行这些'State'函数，你应该使用KeyboardListener，它会在某些事情发生变化时（而不是所有时间）执行你的代码。

您应该查看此示例：http://mrdoob.github.com/three.js/examples/canvas_geometry_cube.html

Answer 2

问题在于，由于某些原因，在Firefox（而不是Chrome）中，即使将渲染器设置为窗口大小，也有滚动的空间，因此Firefox在使用箭头键时滚动。为了解决这个问题，我在THREEx.KeyboardState.js编辑了两个函数，添加了一个preventDefault（）来防止箭头键滚动。

以下是所需的修改：

this._onKeyDown = function(event){
    event.preventDefault();
    self._onKeyChange(event, true); 
};
this._onKeyUp   = function(event){ 
    event.preventDefault();
    self._onKeyChange(event, false);
};

Three.JS - 在Firefox中滚动问题

2 个答案: