Three.js实现光照阴影

Three.js实现光照阴影

在Three.js中，物体可以形成阴影投影效果，但是由于渲染阴影需要消耗计算机大量资源，所以Three.js在默认情况下是不会渲染阴影的。 为了实现渲染阴影效果，我们还需要完成以下四个部分的设置。

1. renderer设置

首先我们需要告诉渲染器我们需要阴影效果：

renderer.shadowMap.enabled = true;

更多详细内容可以查看WebGLRenderer的shadowMap属性。

2. 光源设置

然后我们需要定义能够产生阴影的光源：

light.castShadow = true;

注意： 不是所有的光源都能够产生阴影，只有一部分光源可以，例如通过THREE.PointLight(点光源)、THREE.SpotLight(聚光源)和THREE.DirectionalLight(平行光光源)定义的光源是能够产生阴影的。

3. 指定物体投射阴影

接下来我们需要指定场景中的哪些物体能够投射阴影，能够产生阴影的物体需要设置以下代码：

const geometry = new THREE.BoxBufferGeometry(4, 4, 4); // 生成几何体
const material = new THREE.MeshLambertMaterial({ // 生成材质
    color: 0x00ff00,
});
const mesh = new THREE.Mesh(geometry, material); // 生成网格
mesh.castShadow = true; // 对象是否渲染到阴影贴图中，默认值为false

注意： 只有castShadow属性为true的物体才会产生阴影。

4. 指定物体接受阴影

最后我们还需要指定哪些物体能够接受阴影，这样才能够看出阴影效果。

const planeGeometry = new THREE.PlaneGeometry(300, 300); // 生成平面几何
const planeMaterial = new THREE.MeshLambertMaterial({ // 生成材质
  color: 0xcccccc,
});
const planeMesh = new THREE.Mesh(planeGeometry, planeMaterial); // 生成平面网格
planeMesh.receiveShadow = true; // 设置平面网格为接受阴影的投影面

注意： 只有receiveShadow属性为true的物体才能够接受阴影。

---

全部代码如下：