本文简介
点赞 + 关注 + 珍藏 = 学会了
渲染暗影成果须要耗费肯定的资源，所以 Three.js 默认是敞开暗影成果的。
想要在 Three.js 中实现暗影成果，只需记住接下来要讲的几个点即可。
本文要实现的成果
本文适宜 Three.js 入门级的工友浏览~
如果你还不理解 Three.js ，能够先看看 《Three.js 腾飞》 。
本文应用 Three 的版本是 137 。
根底概念
在学习 Three.js 时，很多知识点其实记住几个重要的步骤就能实现相应的成果。
比方在 《Three.js 腾飞》 中提到的，只有有 场景、摄像机、渲染器、物体 就能在页面中展现一些货色进去了。
要实现暗影成果同样须要几个重要的概念。
咱们首先钻研一下日常生活中是如何产生暗影成果的。
- 须要有光。
- 须要一个物体，比方苹果、狗等。
- 须要一个承受投影的元素，比方高空、桌面等。
在 Three.js 中要产生暗影成果其实和事实世界的原理差不多。
但思考到性能起因，Three.js 默认敞开了暗影成果，须要手动开启暗影成果：
- 渲染器开启暗影成果。
- 有一个能产生暗影的光源，并开启暗影成果。
- 有一个承受暗影投射的元素（比方高空），并设置 承受暗影的属性 为
true。 - 有一个能产生暗影成果的物体，并开启暗影成果。
入手实现
入手之前先察看一下最终成果
上图有一个立方体、高空、光源。
还有根底元素：场景、摄像机、渲染器。
我把用到的元素整顿成一个表格：
| 元素 | 形容 | 相干代码 |
|---|---|---|
| 场景 | 容器，光源、立方体、高空等元素都要增加到场景中。 | 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 。
<script type="module"> import { Scene, // 场景 PerspectiveCamera, // 摄像机 WebGLRenderer, // 渲染器 Color, // 色彩（不是本例重点） PlaneGeometry, // 平面几何（创立高空时会用到） BoxGeometry, // 立方几何体（创立立方体时会用到） MeshLambertMaterial, // 非光泽外表的材质（可承受光照产生暗影成果） Mesh, // 网格，合成物体元素时会用到 SpotLight // 聚光灯 } from '../js/Three/src/Three.js' // 场景 let scene = new Scene() // 摄像机 let camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 ) // 设置摄像机地位 camera.position.set(-30, 60, 60) // 锁定摄像机镜头方向 camera.lookAt(scene.position) // 渲染器 let renderer = new WebGLRenderer() renderer.setClearColor(new Color(0xEEEEEE)) // 设置渲染器色彩 renderer.setSize(window.innerWidth, window.innerHeight) // 渲染器尺寸 // 将渲染器增加到页面 document.body.appendChild(renderer.domElement) // 渲染 renderer.render(scene, camera)</script>我把场景的背景色设置成灰色 renderer.setClearColor(new Color(0xEEEEEE)) 。
此时页面上是一片空白，还没元素能够展现。
第2步：创立光源
因为本例 没有应用 根底材质(MeshBasicMaterial) ，渲染进去的物体没有光源是不会显示的，所以我先把光源增加到场景中，之后增加高空和立方体时就比拟不便察看了。
要实现暗影成果，我抉择了 SpotLight 聚光灯。
// 省略局部代码// 光源let spotLight = new SpotLight(0xFFFFFF)spotLight.position.set(-40, 50, 30)scene.add(spotLight) // 将聚光灯增加到场景中尽管创立了光源，但此时场景中并没有其余物体，所以场景还是一片空白。
第3步：创立高空
在本例中高空是用来承受物体投影的载体。
创立高空我应用了 PlaneGeometry 立体，该办法只需传入宽和高即可。
而后应用 MeshLambertMaterial 材质，设置高空色彩为红色。
// 省略局部代码// 高空let planeGeometry = new PlaneGeometry(60, 20) // 骨架let planeMaterial = new MeshLambertMaterial({ color: 0xffffff }) // 可产生暗影的材质let plane = new Mesh(planeGeometry, planeMaterial) // 网格scene.add(plane) // 将高空增加到场景中此时看到的高空出现上图的样子(一点都不想高空)。
因为灯光的关系，高空看上去并不是纯白色，离灯光越近的中央就越白，越远就越灰。
我心愿高空能够程度搁置，所以我将高空沿x轴旋转 -90° 。
// 省略局部代码plane.rotation.x = -90 * Math.PI / 180 // 高空 x轴 旋转-90度第4步：创立立方体
我应用 BoxGeometry 创立立方体，设置一个红色的纹理。
// 省略局部代码// 立方体let cubeGeometry = new BoxGeometry(6, 6, 6)let cubeMaterial = new MeshLambertMaterial({ color: 0xff0000 }) // 可产生暗影的材质let cube = new Mesh(cubeGeometry, cubeMaterial)scene.add(cube)批改一下立方体的地位
cube.position.set(-6, 6, 3)第5步：开启暗影成果
用回下面提到的四句口诀就能开启暗影成果
- 渲染器开启暗影成果。
- 有一个能产生暗影的光源，并开启暗影成果。
- 有一个承受暗影投射的元素（比方高空），并设置 承受暗影的属性 为
true。 - 有一个能产生暗影成果的物体，并开启暗影成果。
// 省略局部代码// 渲染器开启暗影成果renderer.shadowMap.enabled = true// 光源开启暗影成果spotLight.castShadow = true// 高空承受暗影plane.receiveShadow = true// 立方体开启暗影成果cube.castShadow = true实现！
如果想设置暗影的精密度，还能够通过聚光灯的三个属性进行管制：
spotLight.shadow.mapSizespotLight.shadow.camera.farspotLight.shadow.camera.nera
本文次要解说暗影的根底应用办法，先入个门，前面的案例文章会和联合其余成果实现更好玩的货色~
代码仓库
⭐Three 根底暗影用法
举荐浏览
《『Three.js』腾飞！》
《『Three.js』辅助坐标轴》
《『Three.js』场景 Scene》
《『Three.js』几个简略的入门动画（老手篇）》
点赞 + 关注 + 珍藏 = 学会了
代码仓库