前言

上节介绍光源时提到了光源用法就是照亮物体产生阴影，阴影的产生也有相关的属性与计算方式，本节就来看下three中的阴影。

类别与属性

three文档中有四种阴影构造函数：

• LightShadow:基类阴影，需要跟其他阴影类结合使用。
• PointLightShadow:点光源阴影。
• DirectionalLightShadow:平行光光源阴影。
• SpotLightShadow:聚光灯光源阴影。 后面三个对应之前的是三种光源，而它们的属性大部分也都继承于LightShadow，下面我们看下LightShadow常用的属性：
• .camera：生成观察光源的相机对象，就像我们拿着一个相机去观察前面的物体，后面的物体会处于前面物体的阴影中。
• .map:用来生成深度图，如果物体位置超出像素深度的位置就会处在阴影中。
• .mapSize:用来设置阴影图的宽度和高度。
• .radius:用来模糊阴影边缘，属性值大于1将会模糊。

生成

了解了阴影的种类与属性，下一步就是渲染出阴影，要想产生阴影的效果，光有阴影可不够。现实生活中我们走在路上阴影是在路面展示的，所以我们需要把物体放到一个平面上，用平面去显示物体，最后我们还得设置一下光源阴影相关的属性，总结下来我们阴影有三部分构成：

• 模型：用来产生阴影的物体模型。模型对象有阴影相关的属性需要我们设置才能产生对应的阴影：
  --.castShadow:是否产生阴影投影效果，默认值是false。
• 平面：用来展示阴影的模型对象。平面模型也要设置一个属性：
  --.receiveShadow:是否接受模型的阴影投影，默认值是false。
• 光源：用来照射物体产生阴影。光源有两个阴影相关属性：
  --.castShadow:是否投影动态阴影，默认是false。 --.shadow:阴影相关设置的属性，属性值就是上面介绍三个类别，阴影与光源是匹配的，所以.shadow的具体属性值取决那种光源，比如：DirectionalLight的.shadow属性值是DirectionalLightShadow。 前置知识已到位，我们将三部分创建出来将对应属性设置好就能得到阴影。

   //添加物体
const boxGeometry = new THREE.BoxGeometry();
const boxMaterial = new THREE.MeshLambertMaterial({color:0x8888});
const box = new THREE.Mesh(boxGeometry, boxMaterial);
//设置阴影属性
box.castShadow = true;
//创建平台
const floorGeometry = new THREE.PlaneGeometry(8,8);
const floorMaterial = new THREE.MeshLambertMaterial({
  color: 0x999999
});
const floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.receiveShadow = true;
floor.position.set(0,-2,0)
floor.rotateX(-Math.PI/2)
// 创建光源
const light = new THREE.SpotLight();
light.position.set(0, 10, 0);
light.angle = Math.PI /4;
light.castShadow = true;
scene.add(box, floor,light);
//开启阴影计算
renderer.shadowMap.enabled = true

注意最后一行代码，我们要开启渲染器阴影计算才可以。

总结

生产阴影需要三部分，每个部分都需要设置一些属性，所以创建阴影会有些繁琐，我们可以自己敲下代码加深印象。