Three.js 0.164.1版本PointLight与AmbientLight失效问题求助

针对你升级Three.js从0.128.0到0.164.1后灯光效果异常的问题，核心原因是新版本光照系统的物理规则、API细节有调整，以下是具体修复步骤：

1. 修正导入与命名空间 #

确保使用ES模块正确导入Three.js，代码中统一使用大写的THREE命名空间：

import * as THREE from 'three';

2. 调整灯光参数适配物理光照 #

从0.152.0版本开始，Three.js默认启用物理正确的光照计算，旧版本的强度、衰减规则不再适用：

// 提高PointLight强度，显式设置线性衰减（匹配旧版本效果）
const pointLight = new THREE.PointLight(0xff0000, 100, 100, 1);
pointLight.position.set(5, 5, 5);

// 降低AmbientLight强度，避免场景过曝
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(pointLight, ambientLight);

• 把PointLight强度从1提升至100：物理光照下强度单位为坎德拉，数值需大幅提高才能达到旧版本的视觉效果
• 设置decay:1：新版本默认是2（平方衰减），会导致灯光范围急剧缩小，显式设置为1可恢复旧版本的线性衰减逻辑
• 降低AmbientLight强度：物理光照下全局光的影响被放大，适当调低避免场景过亮

3. 确保材质支持光照 #

如果模型使用的是MeshBasicMaterial，这种材质不受光照影响，需替换为支持光照的材质：

// 基础漫反射材质
const material = new THREE.MeshLambertMaterial({ color: 0xcccccc });
// 或更推荐的PBR材质（适配物理光照）
const material = new THREE.MeshStandardMaterial({ color: 0xcccccc, roughness: 0.5, metalness: 0 });

4. 确认渲染器设置 #

新版本默认启用物理光照，可显式确认渲染器配置：

const renderer = new THREE.WebGLRenderer();
renderer.useLegacyLights = false; // 默认值，启用物理光照体系

修改后重新运行项目，灯光效果即可恢复到接近旧版本的预期状态。

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