Three.js技术问题：如何调整Canvas尺寸却不缩放渲染器及内容？

嘿，你的思路方向是对的，但确实存在几个容易踩坑的潜在问题，我来帮你捋清楚并给出更稳健的优化方案：

你的当前方案的潜在问题 #

• 性能浪费严重：用window.screen.width/height设置渲染器尺寸，意味着哪怕浏览器只占屏幕的1/4，你也在渲染整个屏幕分辨率的画面——这会无端消耗GPU资源，尤其在4K/8K等高分辨率屏幕上，内存占用和渲染耗时都会飙升。
• 多显示器/非全屏场景的兼容性问题：window.screen指向的是浏览器当前所在显示器的分辨率，一旦用户把窗口拖到其他显示器、或初始就不是全屏状态，你的FOV计算会直接偏离预期，导致视觉效果错乱。
• FOV计算的逻辑漏洞：camera.fov = window.innerHeight / window.screen.height的写法依赖“初始状态是全屏”的假设，如果用户打开页面时窗口就是小尺寸，初始FOV会被错误缩放，画面直接不符合预期。

优化后的实现方案 #

1. 用窗口尺寸替代屏幕尺寸初始化渲染器 #

直接基于浏览器窗口大小创建渲染画布，避免无用的超分辨率渲染：

// 初始化时
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio); // 适配高DPR屏幕，保证画面清晰
document.body.appendChild(renderer.domElement);

2. 正确计算FOV以保持视觉一致性 #

核心是保持相机视锥体在世界空间中的高度不变，需要先记录初始状态的基准值，再在resize时动态调整：

// 初始化时记录基准参数
const originalWindowHeight = window.innerHeight;
const originalFov = camera.fov;

// Resize处理函数
function handleResize() {
  // 计算新FOV：保证视锥体高度和初始状态一致
  const newFov = originalFov * (originalWindowHeight / window.innerHeight);
  camera.fov = newFov;
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix(); // 必须更新投影矩阵，否则参数不生效

  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(window.devicePixelRatio); // 同步更新像素比
}

3. 给Resize事件加防抖 #

快速拖动窗口边缘时，Resize事件会疯狂触发，防抖能避免频繁更新相机和渲染器导致的卡顿：

let resizeTimeout;
window.addEventListener('resize', () => {
  clearTimeout(resizeTimeout);
  resizeTimeout = setTimeout(handleResize, 100); // 100ms延迟可根据需求调整
});

// 初始化时先执行一次，确保初始状态正确
handleResize();

额外注意点 #

• 如果你的场景是固定画布尺寸（比如不管窗口多大，只渲染固定分辨率的内容并裁剪显示），那可以保留renderer.setSize(固定宽高)，但此时应该配合renderer.setViewport来控制显示区域，同时相机参数要基于固定画布的宽高计算，而不是屏幕尺寸——这种场景下要注意画布过大导致的性能问题。
• 测试多显示器、窗口缩放、系统DPR调整等场景，确保所有情况下视觉效果都符合预期。

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