Three.js 这样写就有阴影效果啦

本文简介

点赞关注收藏 = 学会了

渲染阴影效果需要消耗一定的资源，所以 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 。

代码语言：javascript复制

<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 聚光灯。

代码语言：javascript复制

// 省略部分代码

// 光源
let spotLight = new SpotLight(0xFFFFFF)
spotLight.position.set(-40, 50, 30)

scene.add(spotLight) // 将聚光灯添加到场景中

虽然创建了光源，但此时场景中并没有其他物体，所以场景还是一片空白。

第3步：创建地面

在本例中地面是用来接受物体投影的载体。

创建地面我使用了 PlaneGeometry 平面，该方法只需传入宽和高即可。

然后使用 MeshLambertMaterial 材质，设置地面颜色为白色。

代码语言：javascript复制

// 省略部分代码

// 地面
let planeGeometry = new PlaneGeometry(60, 20) // 骨架
let planeMaterial = new MeshLambertMaterial({ color: 0xffffff }) // 可产生阴影的材质
let plane = new Mesh(planeGeometry, planeMaterial) // 网格

scene.add(plane) // 将地面添加到场景中

此时看到的地面呈现上图的样子(一点都不想地面)。

由于灯光的关系，地面看上去并不是纯白色，离灯光越近的地方就越白，越远就越灰。

我希望地面可以水平放置，所以我将地面沿x轴旋转 -90° 。

代码语言：javascript复制

// 省略部分代码
plane.rotation.x = -90 * Math.PI / 180 // 地面 x轴 旋转-90度

第4步：创建立方体

我使用 BoxGeometry 创建立方体，设置一个红色的纹理。

代码语言：javascript复制

// 省略部分代码

// 立方体
let cubeGeometry = new BoxGeometry(6, 6, 6)
let cubeMaterial = new MeshLambertMaterial({ color: 0xff0000 }) // 可产生阴影的材质
let cube = new Mesh(cubeGeometry, cubeMaterial)

scene.add(cube)

修改一下立方体的位置

代码语言：javascript复制

cube.position.set(-6, 6, 3)

第5步：开启阴影效果

用回上面提到的四句口诀就能开启阴影效果

渲染器开启阴影效果。
有一个能产生阴影的光源，并开启阴影效果。
有一个接受阴影投射的元素（比如地面），并设置 接受阴影的属性 为 true。
有一个能产生阴影效果的物体，并开启阴影效果。

代码语言：javascript复制

// 省略部分代码

// 渲染器开启阴影效果
renderer.shadowMap.enabled = true

// 光源开启阴影效果
spotLight.castShadow = true

// 地面接受阴影
plane.receiveShadow = true

// 立方体开启阴影效果
cube.castShadow = true