0

我不确定是否有其他人对three.js 有此问题。我有一个立方体的简单演示，它将以不同的旋转速度（箭头键、鼠标或触摸输入）旋转。在 Chrome 浏览器中，一切似乎都运行良好。在工作中，我跳上了 iMac，纹理似乎正在拼接，并没有在 Safari 中正确映射到我的几何图形。

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

编辑：我已经找到了问题所在。我仍然没有理想的解决方案。我创建了我的演示副本并尝试注释掉我的键盘处理代码，令我惊讶的是问题仍然存在。显然，Firefox 正在稍微上下滚动窗口，并且THREEx 库中包含的键盘处理程序不会禁用 Firefox 中向上和向下箭头键的默认行为。在 chrome 中没有滚动窗口的空间，我只是让我的渲染器与窗口大小相同。我不明白为什么 Firefox 滚动。

4

2 回答 2

1

在您的示例中，我在 Mac 中的 Firefox 上试验了相同的问题。

渲染的跳跃是由于垃圾收集器（在 Firefox 上实现不佳）。您正在为每个“动画”功能分配内存。

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

此外，您应该使用 KeyboardListener，而不是使用 KeyboardState 并在每次动画调用时执行那些“状态”函数，它会在某些事情发生变化时（而不是一直）执行您的代码。

你应该看看这个例子： http: //mrdoob.github.com/three.js/examples/canvas_geometry_cube.html

于 2012-06-06T08:29:52.090 回答
1

问题是，由于某种原因，在 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);
};
于 2012-06-06T16:34:40.283 回答