开启阴影效果需要渲染器支持,如果使用的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);
此时,阴影就显得比较逼真了。