Question

我在移动设备上只在three.js中缩放场景时遇到了一个奇怪的问题。

当我在桌面上观看时，一切都很好，但在移动设备上它总是缩放和闪烁......

以下是codepen的链接：https://codepen.io/elliepooh/pen/evXgdE

这是我的初始化函数：

function init() {
 scene = new THREE.Scene();
 camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
 camera.lookAt(scene.position);
 camera.position.set(30, 15, 15);

 renderer = new THREE.WebGLRenderer();
 renderer.setPixelRatio(window.devicePixelRatio);
 renderer.setSize(width, height);
 renderer.setClearColor(0xF2A9B4);
 renderer.shadowMap.enabled = true;
 renderer.shadowMap.type = THREE.PCFSoftShadowMap;

 controls = new THREE.OrbitControls(camera, renderer.domElement);

 raycaster = new THREE.Raycaster();
 mouse = new THREE.Vector2();

 addLights();
 drawChameleon();
 drawBranch();
 drawFly();

 document.body.appendChild(renderer.domElement);

 document.addEventListener('mousemove', onMouseMove);
 document.addEventListener('touchmove', onTouchMove);
 window.addEventListener('resize', onResize);

}

也许我错过了什么？

感谢任何帮助。

Answer 1

最后，我通过将domElement附加到现有的div＃world并将其添加到我的css来解决了这个问题：

body {
  margin: 0;
}
#world {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

非常感谢@AlexFallenstedt。一旦我知道原因是在iOS中，而不是在我的代码中，它让我放松并解决问题。

Answer 2

我想我知道你的意思。我遇到了这个＆＃34;闪烁＆＃34;在移动设备上显示three.js场景之前的错误。你在iOS上测试这个吗？如果是这样，当您向下滚动ios时，浏览器的导航栏会缩小。您的代码有renderer.setSize(width, height)，并且会因为您的事件侦听器而调整整个画布的大小。当你的画布调整大小时，会发生奇怪的事情，因为它们都试图制作动画并调整其大小...

我如何解决这个问题是在render()

中添加一个功能

function resizeCanvas() {
  if (canvas.width != canvas.clientWidth ||
     canvas.height != canvas.clientHeight) {
    canvas.width = canvas.clientWidth;
    canvas.height = canvas.clientHeight;
    gl.viewport(0, 0, canvas.width, canvas.height);
  }
}

它询问画布＆＃39;宽度和高度看起来像client's width and height。如果它没有，它会强制画布的宽度和高度。

你可以在这里看到它：

https://github.com/Fallenstedt/Fallenstedt.github.io/blob/master/_js/index.js#L128-L135

three.js在移动设备上意外调整大小

2 个答案: