05-光源

光源类型

基础光源

名称	描述
环境光 AmbientLight	基础光源，作用在当前场景内的所有物体上
点光源 PointLight	空间中的一个点，向所有方向发射光线，如：恒星光源
聚光灯光源 SpotLight	如：灯光、手电筒等
平行光DirectionalLight	如：太阳光照射在地球上

特殊光源

名称	描述
半球光 HemisphereLight	可以参考夕阳和日出时的光，创建更加自然的户外效果
面光源 AreaLight	散发光线的平面，不是一个点

光源特殊效果

名称	描述
镜面眩光 LensFlare	不是光源，但是可以为光源添加眩光效果

聚光灯光源

• 锥形效果，可以参考手电筒、路灯等光源。（需要设置光源位置）
• 可以生成阴影

new THREE.SpotLight (color，intensity，distance，angle，exponent)

参数名称	描述	默认值
color	光源颜色	无
intensity	光照强度	1
distance	光源到光源结束的距离	0（不会随着距离衰减）
angle	光线散射角度	Math.PI / 3
exponent	沿着光照距离的衰退量	10

initControls(spotLight);

环境光

• 不需要设置位置，对整个场景内的对象都生效
• 没有特定的来源，也不会影响阴影的形成
• 不能作为场景内的唯一光源，需要配合其他光源使用
• 用来减弱阴影，或者给物体添加一些颜色

const ambientLight = new THREE.AmbientLight(0x000000);

// 添加环境光
const ambientLight = new THREE.AmbientLight(0x000000);
scene.add(ambientLight);
initControls(ambientLight);

点光源

• 单点发光，照射所有方向的光源。（需要设置光源位置）
• 不会生成阴影

new THREE.PointLight(color, intensity, distance)

参数名称	描述	默认值
color	光源颜色	无
intensity	光照强度	1
distance	光源到光源结束的距离	0（不会随着距离衰减）

// 添加灯光
const pointLight = new THREE.PointLight(0xffffff);
spotLight.position.set(-10,10,90);
scene.add(pointLight);
// 设置灯光开启阴影
pointLight.castShadow = true;
initControls(pointLight);

平行光

• 平行光也可以成为太阳光
• 会生成阴影

// 添加灯光
const directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(-10,10,90);
scene.add(directionalLight);
directionalLight.castShadow = true;
renderer.shadowMapEnabled = true;

directionalLight.shadowCameraLeft = -50;
directionalLight.shadowCameraRight = 50;
directionalLight.shadowCameraTop = 50;
directionalLight.shadowCameraBottom = -50;
directionalLight.shadowCameraNear = 2;
directionalLight.shadowCameraFar = 200;

directionalLight.shadowMapWidth = 4096;
directionalLight.shadowMapHeight = 4096;

initControls(directionalLight);

半球光

• 模拟室外自然光照
• 不会生成阴影

// 添加灯光
const hemisphereLight = new THREE.HemisphereLight(0xff00ff, 0x00ff00);
hemisphereLight.position.set(-10,10,30);
scene.add(hemisphereLight);
initControls(hemisphereLight);
const animation = () => {
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    hemisphereLight.position.z -= 0.1;

    // 渲染
    renderer.render(scene, camera);

    requestAnimationFrame(animation);
}
animation()