Three.js - 使用阴影效果 shadowMap 和 设置阴影分辨率

开启阴影效果需要渲染器支持，如果使用的WebGLRender 渲染器。
需要renderer.shadowMap.enabled = true;来开启渲染气阴影效果。
示例浏览地址：https://ithanmang.gitee.io/threejs/home/201806/20180624/01-shadow.html
可以看待阴影效果比较突出，并且阴影的分辨率也比较高

步骤

1 首先需要渲染器支持阴影效果

//开启阴影效果
webGLRenderer.shadowMap.enabled = true;
webGLRenderer.shadowMap.type = THREE.PCFSoftShadowMap;

WebGLRenderer是默认开启支持阴影效果。

webGLRenderer.shadowMap.type = THREE.PCFSoftShadowMap;

这只这个类型的shadow类型看起来比较清晰。

2 使灯光可是投掷阴影

// 添加光源
var spotLight = new THREE.SpotLight(0xcccccc);
spotLight.position.set(-100, 300, 10);
spotLight.castShadow = true;

其中的spotLight.castShadow = true;代表，灯光投掷阴影。
但是并不是所有的灯光都可以投掷阴影，环境光就不可以。

3 创建投掷阴影的物体

// 创建立方体
 var cubeGeometry = new THREE.CubeGeometry(40, 40, 40);
 var cubeMaterial = new THREE.MeshLambertMaterial({color: Math.random() * 0xffffff});
 var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
 cube.position.x = 10;
 cube.position.z = 150;
 cube.castShadow = true;

4 创建可以接收阴影的对象

// 创建平面
var planeGeometry = new THREE.PlaneGeometry(400, 400);
var planeMaterial = new THREE.MeshLambertMaterial({color: 0x6D6565});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
// 使平面就接收物体投掷过来的阴影
plane.receiveShadow = true;

至此就可以实现物体向平面投掷阴影的效果，但是我们发现，此时的阴影类似马赛克效果。

这是因为阴影分辨率的问题，可以通过调整阴影的分辨率来消除马赛克样式的阴影。

5 调整阴影分辨率

// 添加光源
var spotLight = new THREE.SpotLight(0xcccccc);
spotLight.position.set(-100, 300, 10);
spotLight.castShadow = true;
//设置阴影分辨率
spotLight.shadow.mapSize.width = 2048;
spotLight.shadow.mapSize.height = 2048;
scene.add(spotLight);

此时，阴影就显得比较逼真了。