Three.js中PointLight、SpotLight不渲染问题求助

你的PointLight和SpotLight无法显示效果，核心原因是光源位置过远导致光照衰减后强度几乎为0，加上相机的远裁剪面设置进一步放大了问题，具体分析和修复如下：

问题分析 #

1. 光照衰减机制：
   PointLight和SpotLight默认启用物理衰减（decay: 2），光照强度会随距离平方反比衰减。你的点光源添加到相机后，世界位置是(200, 500, 300)，与原点处的球体距离约616，计算后到达球体的强度约为0.5 / (616²) ≈ 0.0000013，几乎无法察觉。
   聚光灯同理，世界位置为(0, 0, 150)，与球体距离150，默认强度1衰减后仅约1 / (150²) ≈ 0.00004，同样看不到效果。
   而DirectionalLight是平行光，无衰减特性，只要方向正确就能持续提供稳定光照，因此能正常显示。

2. 相机视锥范围限制：
   你的相机far值设为100，而点光源、聚光灯的世界位置都超过了这个范围，虽然光源本身不需要被相机可见，但过远的距离进一步加剧了衰减问题。

修复代码 #

调整光源位置、强度，并优化相机参数，修改后的代码如下：

let renderer = new WebGLRenderer();
renderer.setSize( container.clientWidth, container.clientHeight );
renderer.setPixelRatio( window.devicePixelRatio );
container.append( renderer.domElement );

const scene = new Scene();
scene.background = new Color( 'black' );

const aspect = container.clientWidth / container.clientHeight;
// 增大far值，确保光源和物体都在视锥内
let camera = new PerspectiveCamera( 35, aspect, 0.1, 500 );
camera.position.set( 0, 0, 100 );
camera.updateProjectionMatrix();

var drLight = new DirectionalLight( 0xffffff, 0.8 );
drLight.position.set( 3, 2000, 2000 );
camera.add( drLight );

// 修改点光源位置（靠近球体）并提高强度
var pLight = new PointLight( 0x8564cc, 10 );
pLight.position.set( 0, 30, 0 ); // 直接设置世界位置，不依赖相机
scene.add( pLight );

// 修改聚光灯位置、强度，确保指向球体
var sLight = new SpotLight( 0xff0000, 15 );
sLight.position.set( 0, 0, 50 ); // 世界位置在球体前方50单位
scene.add( sLight );

scene.add( camera );

// Create sphere
const geometry = new SphereGeometry( 15, 32, 16 );
const material = new MeshPhongMaterial( {
    color: new Color( 0x3a228a ),
    shininess: 70 // 提高shininess让高光更明显
} );

const sphere = new Mesh( geometry, material );
scene.add( sphere );

// 聚光灯明确指向球体
sLight.target = sphere;

renderer.render( scene, camera );

关键修改点 #

• 调整光源位置：将PointLight和SpotLight直接添加到场景，设置靠近球体的世界位置，避免因相机父元素导致的过远距离。
• 提高光照强度：针对衰减机制，适当提高intensity值，让到达球体的光照足够明显。
• 优化相机参数：增大far值到500，确保所有光源和物体都在视锥范围内。
• 明确聚光灯目标：将SpotLight的target设置为球体，确保光照方向准确。
• 增强材质高光：提高shininess值，让光源效果更易观察。

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