--- theme: smartblue --- 我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章，[点击查看活动详情](https://s.juejin.cn/ds/jooSN7t "https://s.juejin.cn/ds/jooSN7t") --- # 本文简介 **点赞 + 关注 + 收藏 = 学会了**
渲染阴影效果需要消耗一定的资源，所以 `Three.js` 默认是关闭阴影效果的。想要在 `Three.js` 中实现阴影效果，只需记住接下来要讲的几个点即可。
本文要实现的效果 ![01.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d26de5be866c40b2ada6cfafb868652e~tplv-k3u1fbpfcp-watermark.image?)
本文适合 `Three.js` 入门级的工友阅读~ 如果你还不了解 `Three.js` ，可以先看看 [《Three.js 起飞》](https://juejin.cn/post/7101683178741432356) 。本文使用 `Three` 的版本是 `137` 。

# 基础概念在学习 `Three.js` 时，很多知识点其实记住几个重要的步骤就能实现相应的效果。比如在 [《Three.js 起飞》](https://juejin.cn/post/7101683178741432356) 中提到的，只要有 `场景、摄像机、渲染器、物体` 就能在页面中展示一些东西出来了。
要实现阴影效果同样需要几个重要的概念。我们首先研究一下日常生活中是如何产生阴影效果的。 1. 需要有光。 2. 需要一个物体，比如苹果、狗等。 3. 需要一个接受投影的元素，比如地面、桌面等。
在 `Three.js` 中要产生阴影效果其实和现实世界的原理差不多。但考虑到性能原因，`Three.js` 默认关闭了阴影效果，需要手动开启阴影效果： 1. 渲染器开启阴影效果。 2. 有一个能产生阴影的光源，并开启阴影效果。 3. 有一个接受阴影投射的元素（比如地面），并设置 **接受阴影的属性** 为 `true`。 4. 有一个能产生阴影效果的物体，并开启阴影效果。
# 动手实现动手之前先观察一下最终效果 ![01.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/99db5f68f0f549e1b1961b0ef7bb22af~tplv-k3u1fbpfcp-watermark.image?) 上图有一个立方体、地面、光源。还有基础元素：场景、摄像机、渲染器。我把用到的元素整理成一个表格： | 元素 | 描述 | 相关代码 | | ------ | ------------------------------------------------------------ | ------------------------------------------------------------ | | 场景 | 容器，光源、立方体、地面等元素都要添加到场景中。 | `let scene = new Scene()` | | 摄像机 | 场景中的相机，代替人眼去观察的工具。 | `let camera = new PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)` | | 渲染器 | 渲染工具，本文主要讲的是开启阴影渲染功能。 | 需要开启阴影渲染功能
`renderer.shadowMap.enabled = true` | | 地面 | 地面，接收阴影的元素。 | 用 `PlaneGeometry` 生成一个平面，并设置该平面的 `receiveShadow` 属性为 `true` 就能接受别的物体投射过来的阴影。 | | 立方体 | 本例的物体元素。 | 用 `BoxGeometry` 创建一个立方体，并设置该立方体的 `castShadow` 属性为 `true` ，就能产生投影效果。 | | 光源 | 要使用 **可产生阴影效果** 的光源，比如本例的 `SpotLight` 聚光灯。
像 `AmbientLight 环境光` 、`PointLight 点光源` 是不能产生阴影效果的。 | 使用 `SpotLight` 创建光源，并设置该光源的 `castShadow` 为 `true` 开启阴影效果。 |
## 第1步：搭建基础场景在 `Three` 中搭建基础场景需要3要素：**场景 `Scene`、摄像机 `PerspectiveCamera`、渲染器 `WebGLRenderer`** 。 ![02.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b85b8f1586414086a78539484cf1ca7d~tplv-k3u1fbpfcp-watermark.image?) ```html ``` 我把场景的背景色设置成灰色 `renderer.setClearColor(new Color(0xEEEEEE))` 。此时页面上是一片空白，还没元素可以展示。
## 第2步：创建光源因为本例 *没有使用* 基础材质(`MeshBasicMaterial`) ，渲染出来的物体没有光源是不会显示的，所以我先把光源添加到场景中，之后添加地面和立方体时就比较方便观察了。要实现阴影效果，我选择了 `SpotLight` 聚光灯。 ```js // 省略部分代码 // 光源 let spotLight = new SpotLight(0xFFFFFF) spotLight.position.set(-40, 50, 30) scene.add(spotLight) // 将聚光灯添加到场景中 ``` 虽然创建了光源，但此时场景中并没有其他物体，所以场景还是一片空白。
## 第3步：创建地面在本例中地面是用来接受物体投影的载体。创建地面我使用了 `PlaneGeometry` 平面，该方法只需传入宽和高即可。然后使用 `MeshLambertMaterial` 材质，设置地面颜色为白色。 ```js // 省略部分代码 // 地面 let planeGeometry = new PlaneGeometry(60, 20) // 骨架 let planeMaterial = new MeshLambertMaterial({ color: 0xffffff }) // 可产生阴影的材质 let plane = new Mesh(planeGeometry, planeMaterial) // 网格 scene.add(plane) // 将地面添加到场景中 ``` ![03.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d5977ff1fa654435814408ba5e6d56f4~tplv-k3u1fbpfcp-watermark.image?) 此时看到的地面呈现上图的样子(一点都不想地面)。由于灯光的关系，地面看上去并不是纯白色，离灯光越近的地方就越白，越远就越灰。
我希望地面可以水平放置，所以我将地面沿x轴旋转 `-90°` 。 ```js // 省略部分代码 plane.rotation.x = -90 * Math.PI / 180 // 地面 x轴旋转-90度 ``` ![04.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/98a94af5f5dd4f4a94ce2a4375d754fc~tplv-k3u1fbpfcp-watermark.image?)
## 第4步：创建立方体我使用 `BoxGeometry` 创建立方体，设置一个红色的纹理。 ```js // 省略部分代码 // 立方体 let cubeGeometry = new BoxGeometry(6, 6, 6) let cubeMaterial = new MeshLambertMaterial({ color: 0xff0000 }) // 可产生阴影的材质 let cube = new Mesh(cubeGeometry, cubeMaterial) scene.add(cube) ``` ![05.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/386443a27d74448ba05d88457fc10b94~tplv-k3u1fbpfcp-watermark.image?)
修改一下立方体的位置 ```js cube.position.set(-6, 6, 3) ``` ![06.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f9e7011b9372447682dc8b9d2995eea0~tplv-k3u1fbpfcp-watermark.image?)
## 第5步：开启阴影效果用回上面提到的四句口诀就能开启阴影效果 1. 渲染器开启阴影效果。 2. 有一个能产生阴影的光源，并开启阴影效果。 3. 有一个接受阴影投射的元素（比如地面），并设置 **接受阴影的属性** 为 `true`。 4. 有一个能产生阴影效果的物体，并开启阴影效果。
```js // 省略部分代码 // 渲染器开启阴影效果 renderer.shadowMap.enabled = true // 光源开启阴影效果 spotLight.castShadow = true // 地面接受阴影 plane.receiveShadow = true // 立方体开启阴影效果 cube.castShadow = true ``` ![07.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d786eefd89164a1dbf3742c0aaaa999f~tplv-k3u1fbpfcp-watermark.image?) 完成！
如果想设置阴影的精细度，还可以通过聚光灯的三个属性进行控制： - `spotLight.shadow.mapSize` - `spotLight.shadow.camera.far` - `spotLight.shadow.camera.nera`
本文主要讲解阴影的基础使用方法，先入个门，后面的案例文章会和结合其他效果完成更好玩的东西~

# 代码仓库 ⭐[Three 基础阴影用法](https://gitee.com/k21vin/three-study-demo/blob/master/06%E7%81%AF%E5%85%89/%E5%9F%BA%E7%A1%80%E9%98%B4%E5%BD%B1.html)

# 推荐阅读 👍[《『Three.js』起飞！》](https://juejin.cn/post/7101683178741432356) 👍[《『Three.js』辅助坐标轴》](https://juejin.cn/post/7102077070418640932) 👍[《『Three.js』场景 Scene》](https://juejin.cn/post/7107272960754319397) 👍[《『Three.js』几个简单的入门动画（新手篇）》](https://juejin.cn/post/7122452027510095908#comment)
**点赞 + 关注 + 收藏 = 学会了**