聚光源SpotLight

聚光源可以认为是一个沿着特定方会逐渐发散的光源，照射范围在三维空间中构成一个圆锥体。

// 聚光源
// 0xffffff:光源颜色
// 1.0：光照强度intensity
const spotLight = new THREE.SpotLight(0xffffff,1.0);
scene.add(spotLight);//光源添加到场景中

聚光源发散角度.angle

通过属性.angle可以设置聚光源发散角度，和目标.target两个属性来实现。

// 设置聚光光源发散角度
spotLight.angle = Math.PI / 6;//光锥角度的二分之一

平行光阴影计算

点光源PointLight、聚光源SpotLight、平行光DirectionalLight等都可以产生阴影，就像实际生活中的影子。

平行光DirectionalLight阴影步骤

.castShadow设置产生阴影的模型对象
.castShadow设置产生阴影的光源对象
.receiveShadow设置接收阴影效果的模型
.shadowMap.enabledWebGl渲染器允许阴影渲染
.shadow.camera设置光源阴影渲染范围

1.模型阴影投射.castShadow

// 设置产生投影的网格模型
mesh.castShadow = true;

2.光源阴影投射属性.castShadow

// 平行光
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
// 平行光设置产生阴影的光源对象,开启光源阴影的计算功能
directionalLight.castShadow = true;

3.模型阴影接收属性.receiveShadow

// 设置接收阴影的投影面
planeMesh.receiveShadow = true;

4.shadowMap.enabled允许渲染器渲染阴影

// 设置渲染器，允许光源阴影渲染
renderer.shadowMap.enabled = true;

5. shadow.camera设置阴影渲染范围

// 设置三维场景计算阴影的范围
directionalLight.shadow.camera.left = -50;
directionalLight.shadow.camera.right = 50;
directionalLight.shadow.camera.top = 200;
directionalLight.shadow.camera.bottom = -100;
directionalLight.shadow.camera.near = 0.5;
directionalLight.shadow.camera.far = 600;

可视化阴影范围

// 可视化平行光阴影对应的正投影相机对象
const cameraHelper = new THREE.CameraHelper(directionalLight.shadow.camera);
scene.add(cameraHelper);

阴影范围.mapSize和.radius

light.shadow.mapSize阴影贴图尺寸属性(提升边缘渲染效果)
light.shadow.radius弱化模糊阴影边缘

light.shadow.mapSize阴影贴图尺寸属性

你可以把threejs生成的光源阴影类比为前面学习过的颜色贴图.map，阴影投射到其它物体上，可以理解为阴影就像贴图一样映射到Mesh上。

你可以尝试把.mapSize设置为比较小的值(尺寸一般2的n次方)，查看阴影渲染质量。

directionalLight.shadow.mapSize.set(128,128)

阴影半径.shadow.radius属性

适当提升.shadow.radius,你可以感到阴影边缘与非阴影区域是渐变过渡，或者说阴影边缘逐渐弱化或模糊化，没有很明显的边界感

directionalLight.shadow.radius = 3;

11.光源和阴影