ThreeJS：如何设置渲染器尺寸适配屏幕并解决白边与滚动条问题？

这个问题我之前也碰到过，核心原因是浏览器默认的页面样式和window.innerWidth/innerHeight的特性导致的，下面给你几个靠谱的解决思路：

1. 先重置页面基础样式（最关键的一步） #

默认情况下，浏览器的html和body元素会自带margin（比如Chrome是8px），而且页面可能存在默认的滚动空间。我们需要先把这些默认样式清掉，确保画布能完全贴合视口：

html, body {
  margin: 0;          /* 去掉默认外边距 */
  padding: 0;         /* 去掉默认内边距 */
  overflow: hidden;   /* 隐藏滚动条，避免画布超出视口时出现滚动 */
  width: 100%;        /* 确保元素占满宽度 */
  height: 100%;       /* 确保元素占满高度 */
}

2. 正确设置Renderer的尺寸 #

样式重置后，再使用window.innerWidth和window.innerHeight就没问题了，另外建议加上设备像素比（DPR）适配，避免画布在高分辨率屏幕上模糊：

// 初始化Renderer
const renderer = new THREE.WebGLRenderer();
// 适配高分辨率屏幕
renderer.setPixelRatio(window.devicePixelRatio);
// 设置尺寸为视口大小
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

如果你的场景不需要考虑滚动条，也可以用document.documentElement.clientWidth和document.documentElement.clientHeight，这两个值是不包含滚动条宽度的视口尺寸，在某些场景下会更精准。

3. 处理窗口 resize 事件 #

别忘了监听窗口大小变化，实时更新Renderer尺寸和相机参数，保证适配始终有效：

window.addEventListener('resize', () => {
  // 更新Renderer尺寸
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 更新相机宽高比（假设你用的是PerspectiveCamera）
  camera.aspect = window.innerWidth / window.innerHeight;
  // 必须更新投影矩阵，否则相机视角会出错
  camera.updateProjectionMatrix();
});

额外小技巧：直接设置Canvas样式 #

如果不想修改全局CSS，也可以直接给Renderer生成的Canvas元素设置样式，强制它占满视口：

renderer.domElement.style.position = 'fixed';
renderer.domElement.style.top = '0';
renderer.domElement.style.left = '0';
renderer.domElement.style.width = '100%';
renderer.domElement.style.height = '100%';
renderer.domElement.style.margin = '0';
renderer.domElement.style.padding = '0';

这种方式相当于把画布固定在视口，不受body样式影响，也能解决白边和滚动条问题。

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