面向移动设备的Three.js问题

Dig_Dig_Dig

我正在测试用Three.js编写的Web应用程序的错误,并且有关于平板电脑(尤其是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();

}

有什么想法吗?

Dig_Dig_Dig

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

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

当我应该一直使用画布的宽度和高度时:

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

更改此设置解决了我的问题,现在我可以调整大小而没有任何问题。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Three.JS通过移动设备围绕对象旋转相机

来自分类Dev

移动设备上的wordpress问题

来自分类Dev

移动设备的视频 CSS 问题

来自分类Dev

Three.js触摸事件无法在移动设备上正常运行

来自分类Dev

我的three.js应用程序未在移动设备上运行

来自分类Dev

three.js旋转面向对象

来自分类Dev

移动设备的顶部和底部填充问题

来自分类Dev

移动设备上的粘性滚动问题

来自分类Dev

调查 IOS 设备上的 html/js 问题

来自分类Dev

Leaflet.js映射移动高度问题

来自分类Dev

冲突检测Three.js的问题

来自分类Dev

Three.js-渲染问题-动画震撼

来自分类Dev

Three.js-CanvasRenderer问题:平面着色?

来自分类Dev

Potree / Three.js测量问题

来自分类Dev

OBJ Loader THREE.JS问题

来自分类Dev

Three.js碰撞检测问题

来自分类Dev

JS中的移动设备上的点击与触摸

来自分类Dev

JS仅定位到移动设备

来自分类Dev

jQuery Typed.js移动设备onClick

来自分类Dev

确定元素在JS中的位置-移动设备与桌面设备

来自分类Dev

Three.js-关于(使用)THREE.BufferGeometry的问题

来自分类Dev

Three.js使使用THREE.ShapeGeometry创建的文本面向镜头

来自分类Dev

Socket.io问题仅在移动设备上

来自分类Dev

各种移动设备上的颤振响应问题

来自分类Dev

固定元素高度问题/滚动时在移动设备上跳转

来自分类Dev

针对移动设备问题的Swiper初始化脚本

来自分类Dev

jQuery Auto Height Divs vs移动设备的问题

来自分类Dev

移动设备上的Pusher(网络套接字服务)性能问题

来自分类Dev

移动设备上的视口元标记问题