Three.js生产构建Canvas无法占满全屏，调整窗口即可修复

核心原因 #

页面加载时，DOM容器或窗口的尺寸尚未完全确定，导致Three.js渲染器初始化时使用了错误的宽高值；而窗口resize事件会触发尺寸重新计算，所以调整窗口后恢复正常。生产环境（gh-pages）下可能因为资源加载顺序、CSS渲染优先级等问题，放大了这个时机差。

针对性修复方案 #

1. 初始化后强制触发resize事件 #

在你的renderer.js中，完成渲染器配置后，手动触发一次窗口resize事件，直接复用已有的尺寸调整逻辑：

// 初始化渲染器代码...
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);

// 添加这行代码，强制触发尺寸校准
window.dispatchEvent(new Event('resize'));

2. 基于容器实际尺寸初始化渲染器 #

如果你的Three.js场景挂载在某个DOM容器内，不要直接使用window.innerWidth/innerHeight，而是读取容器的计算后尺寸：

const container = document.getElementById('your-container-id'); // 替换为你的容器ID
const { clientWidth, clientHeight } = container;

renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(clientWidth, clientHeight);

同时确保容器的CSS样式在页面加载时就生效：

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#your-container-id {
  width: 100%;
  height: 100%;
}

3. 等待DOM完全加载后初始化场景 #

将Three.js的初始化逻辑放在DOMContentLoaded事件回调中，确保所有DOM元素和CSS都已渲染完成：

document.addEventListener('DOMContentLoaded', () => {
  // 初始化你的World/Renderer代码
});

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