Three.js项目迁移至Vite后光照显示异常求助

• 版本差异导致颜色空间不匹配
  新版本Three.js（r152及以上）默认将渲染器的outputColorSpace设为SRGBColorSpace，而旧版本通常使用线性颜色空间，这会导致MeshStandardMaterial的颜色与光照表现和旧环境不一致。
  解决方法：
  在渲染器初始化后添加颜色空间配置：

  renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
  

  或者直接为材质指定颜色空间：

  const material = new THREE.MeshStandardMaterial({
    color: 0x00ff00,
    roughness: 0.5,
    metalness: 0.5,
    colorSpace: THREE.LinearSRGBColorSpace
  });
  

• 依赖版本不一致
  旧代码使用本地的three.module.js，Vite环境中安装的Three.js版本可能与旧版本存在差异，部分光照相关的默认参数或API有变更。
  解决方法：
  查看旧代码中three.module.js开头注释标注的版本号，在Vite项目中安装对应版本：

  npm install three@[旧版本号]
  

• Vite构建配置排查
  确认Vite的tree-shaking或压缩规则没有误删Three.js的光照核心模块，可在vite.config.js中添加优化配置：

  export default {
    optimizeDeps: {
      include: ['three']
    }
  }
  

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