三.js 移动设备方向问题答案

【问题标题】：Three.js problems with mobile device orientation三.js 移动设备方向问题
【发布时间】：2017-01-20 05:00:55
【问题描述】：

我正在测试一个用 three.js 编写的网络应用程序，并且我收到报告称平板电脑（特别是 Android）上的用户在现场出现了一些奇怪的行为。

这是应该呈现的相同视图：

当他们更改设备方向时会发生这种情况，但在 Microsoft Edge 中运行 Windows 的 2 合 1 平板电脑上也有报告。用户在屏幕上滑动手指时会遇到类似的错误（浏览器想要垂直和水平滚动，然后跳回固定视图）。我还没有在桌面上看到过这种情况。

这是我的 onWindowResize 函数：

 function onWindowResize(event) {

    SCREEN_WIDTH = window.innerWidth;
    SCREEN_HEIGHT = window.innerHeight;

    renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);

    camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
    camera.updateProjectionMatrix();

    composer.reset();

}

有什么想法吗？

【问题讨论】：

我注意到在某些台式电脑和笔记本电脑上调整窗口大小时也会出现同样的错误。我还没有找到重现问题的一致方法，它似乎是随机发生的。

标签： javascript android three.js

【解决方案1】：

我意识到我正在调整 fxaa 作曲家的大小并将其设置为屏幕宽度和高度：

effectFXAA.uniforms['resolution'].value.set(1 / SCREEN_WIDTH, 1 / SCREEN_HEIGHT);

当我应该使用画布宽度和高度时：

effectFXAA.uniforms['resolution'].value.set(1 / canvas.width, 1 / canvas.height);

更改此设置解决了我的问题，我现在可以毫无问题地调整大小。

【讨论】：