如何解决ThreeJS网页仅在移动端视图出现的白边问题？

我曾认为这是窗口尺寸调整问题，为此编写了一段JS函数，但问题似乎并非源于此。请问有什么解决建议吗？

相关代码如下：

//if the user resizes the window, the camera and renderer are updated
function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}
onWindowResize();
window.addEventListener('resize', onWindowResize);

白边示例图：

针对这个白边问题，给你几个具体的排查和解决方向：

• 清理HTML/CSS默认边距
  浏览器默认会给body设置margin，导致渲染区域无法全屏。添加以下CSS重置：

  body {
    margin: 0;
    padding: 0;
    overflow: hidden; /* 隐藏滚动条，避免挤占渲染空间 */
  }
  

  同时确认渲染容器（如果有）的样式：设置width: 100%; height: 100%;，不要有额外的padding或margin。

• 适配高DPI屏幕
  高分辨率屏幕下，未设置像素比会导致渲染内容缩放后出现白边。在onWindowResize函数中添加像素比设置：

  function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(window.devicePixelRatio); // 新增这一行
  }
  

• 检查渲染容器的尺寸计算
  如果渲染器挂载到自定义DOM容器而非直接全屏，不要用window.innerWidth/innerHeight，改用容器的实际尺寸：

  const container = document.getElementById('your-render-container');
  function onWindowResize() {
    const width = container.clientWidth;
    const height = container.clientHeight;
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
    renderer.setSize(width, height);
  }
  

• 同步渲染器清除色与页面背景
  如果白边是渲染器清除画布的颜色和页面背景色不匹配导致的，设置渲染器清除色与页面背景一致：

  renderer.setClearColor(0xffffff); // 替换为你的页面背景色值
  

内容的提问来源于stack exchange，提问作者Zeban