three.js给场景加上阴影

学习交流欢迎加群：789723098，博主会将一些demo整理共享

现实世界中（假设只在地球，先不考虑外太空），只要有光的地方就会有阴影产生。所以当我们构建好一个具备光照的场景后，还必须给其加上阴影，才能更清楚地显示场景中各个元素的关系，光照和阴影是webgl和three.js开发大型场景必不可少的元素，如果少了这两者，想象一下，地球上一切事物如果没有阴影，没有灯光，那么是不是世界乌漆嘛黑，什么都看不见？本节先不讲光照，先讲讲阴影的投射和接收，各种光源和材质的介绍和应用，在后面会单独写文章进行详细介绍。接下来先看看怎样给场景添加阴影。

添加阴影主要是这几个步骤：

渲染器一定要允许产生阴影：

 

//渲染器
//antialias:true增加抗锯齿效果
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setClearColor(new THREE.Color(0x000000));//设置窗口背景颜色为黑
renderer.setSize(window.innerWidth, window.innerHeight);//设置窗口尺寸
renderer.shadowMapEnabled = true;//开启阴影，加上阴影渲染

 

灯光要投下阴影，否则场景不会产生阴影：

 

var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-50, 60, 15);
spotLight.castShadow = true;//开启灯光投射阴影

 

物体要投下阴影和接受阴影，假设这里的物体为Mesh；否则也不会有阴影产生：

 

Mesh.castShadow = true;//开启投影
Mesh.receiveShadow = true;//接收阴影

当阴影添加完毕后，就可以产生阴影的效果啦。接下来实现一个有阴影的场景，其效果如下图所示：

 

这个实例的静态版本在我另一片博文：点击打开链接，轨道控制器鼠标交互的版本在这篇博文：点击打开链接。

但有一点需要特别注意，光源的位置一定要距离合适，否则容易引起阴影模糊粗糙的像打马赛克一样，像下面的图所示：

下面附上示例代码：