点击窗口最大化图标时three.js场景更新失效问题求助

• 核心问题：代码执行顺序错误
  你在resize事件里先调用了camera.updateProjectionMatrix()，之后才设置camera.aspect，这会导致投影矩阵更新时用的还是旧的宽高比，最大化窗口时自然会出现画面变形。错误的状态还可能引发渲染循环异常中断。

• 修复后的resize事件代码

  // resize
  window.addEventListener('resize', () => {
    sizes.width = window.innerWidth
    sizes.height = window.innerHeight
  
    // 先更新相机宽高比，再更新投影矩阵
    camera.aspect = sizes.width / sizes.height
    camera.updateProjectionMatrix()
  
    // 更新渲染器尺寸，同时设置像素比避免高DPI屏幕模糊
    renderer.setSize(sizes.width, sizes.height)
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
  })
  

• 额外优化建议

  • 给resize事件添加防抖处理，避免窗口快速调整时频繁触发更新操作：

    let resizeTimeout
    window.addEventListener('resize', () => {
      clearTimeout(resizeTimeout)
      resizeTimeout = setTimeout(() => {
        sizes.width = window.innerWidth
        sizes.height = window.innerHeight
        camera.aspect = sizes.width / sizes.height
        camera.updateProjectionMatrix()
        renderer.setSize(sizes.width, sizes.height)
        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
      }, 50)
    })
    

  • 可以在渲染循环中添加简单日志，排查是否有代码抛出错误导致requestAnimationFrame停止调用：

    const loop = () => {
      console.log('render loop running')
      renderer.render(scene, camera)
      window.requestAnimationFrame(loop)
    }
    loop();
    

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