携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第15天，点击查看活动详情 >>
前言
接上一章，移动阴影贴图，有三种光可以投掷阴影，分别为DirectionalLight 定向光、 PointLight 点光源、SpotLight 聚光灯
DirectionalLight 定向光
第一件事是设置渲染器中的阴影属性
// 设置渲染器支持阴影
const renderer = new THREE.WebGLRenderer({ canvas });
renderer.shadowMap.enabled = true;
我们还需要设置光能投射阴影
// 设置灯光支持投掷阴影
const light = new THREE.DirectionalLight(color, intensity);
light.castShadow = true;
在场景中的每个网格，我们都能设置它是否能投掷阴影或被投掷阴影。 这里我们只设置地面能被投掷阴影，这样我们不需要关心地面投掷阴影的问题。
// 地面网格设置可以接受投掷阴影
const mesh = new THREE.Mesh(planeGeo, planeMat);
mesh.receiveShadow = true;
对于球体和立方体，我们需要设置他们都能投掷阴影或者被投掷（接受）阴影
const mesh = new THREE.Mesh(cubeGeo, cubeMat);mesh.castShadow = true;
mesh.receiveShadow = true;
...
const mesh = new THREE.Mesh(sphereGeo, sphereMat);
mesh.castShadow = true;
mesh.receiveShadow = true;
以上代码基于光照-3的代码片段增加阴影相关效果进行生成，最终效果如下
可以看到的是，只能看到部分阴影，虽然也符合我们的视觉直觉，但是为什么会导致这样的渲染结果呢？原因是阴影是通过光线的角度渲染场景之后生成的。在这种情况下，现在只有一个DirectionalLight 定向光在照射这个球体，就像我们之前的文章，光源的阴影相机决定了阴影投射的区域。在上面的例子中，该区域太小了。
接下来的话，就是借助CameraHelper整理类，来看看阴影相机是如何作用的
为了可视化该区域，我们可以通过CameraHelper 相机帮助类 来获取光源的阴影相机。
const cameraHelper = new THREE.CameraHelper(light.shadow.camera);
scene.add(cameraHelper);
你现在可以看到光源的阴影相机可以投射的区域。
我们来回调整相机的 x 坐标值。这样我们可以很清楚的看到：光源的阴影相机所包围的 box 才是能投射阴影的区域。
下一篇，我们将继续探讨不同光源下，阴影相机的作用和表现，以下是本文的代码片段，包含文中出现的全部代码
