以上为当前效果的动图。

效果查看地址：https://www.wjceo.com/blog/threejs2/2020-09-01/203.html

实现当前的效果，其实主要的用到了就是深度图原理。首先，我们需要实现生成一张深度图，在three.js里面，实现深度图的生成，其实就是renderTarget对象，这里，我讲解一下，如何生成一张three.js的深度图。 首先，你需要确定一下，你要生成深度图的范围，就是个宽高深范围，需要创建一个正交相机，定位到你需要生成深度范围的上方中心。 你还需要创建一个新的场景，three.js的Scene对象有一个overrideMaterial属性（如果不为空，它将强制场景中的每个物体使用这里的材质来渲染。默认值为null。），此属性可以设置一个材质对象，我这里直接赋值了一个shaderMaterial对象，用于需要渲染深度图信息的模型。 重要的一步就是渲染，在渲染前，我们需要设置渲染深度图场景的children列表，这里不能使用add方法添加渲染对象，因为你使用add方法，会修改掉原对象的parent，那么，绘制默认场景时，它的世界坐标获取有可能会出现错误，我们将需要渲染的3d对象直接push到床架你的一个新数组中，然后赋值给渲染深度图场景的children。 最后，绘制深度图时，直接用renderer对象即可：

这里，直接设置了渲染对象，然后设置了一下深度渲染列表。渲染完深度场景后，再将渲染对象设置为null。这样就实现了一张深度图的渲染。

在上一节，我实现了雨滴朝向相机，并垂直于地面的效果。虽然是一个比较取巧的方式，详情见上一章。这一章，在之前的shader上面，修改了一下实现了深度裁剪。 那么，主要修改针对于雨滴的shader进行一下修改。在材质属性上，多添加了，深度相机矩阵，深度图，以及从顶点着色器传入到片元着色器的深度uv。 每次计算一个雨滴位置的使用，通过相机的逆矩阵，计算出来，当前相机位置的uv坐标。这里逻辑和场景世界坐标转平面坐标一个道理，获取到世界坐标，然后获取到基于左下角的uv映射。再转到片元着色器里面，在片元着色器里，增加通过深度uv去深度纹理上面拾取深度信息，根据盒子的高度，计算出遮挡的实际位置，如果当前渲染位置超过了遮挡位置，直接不渲染内容。这样就实现了根据地形的深度裁剪。