three.js中的阴影根据光照的分类分成三种,平行光源的(DirectionLight)如图1,点光源的(PoinLight)如图2,聚光灯光源的(SpotLight)如图3。环境光只是一种背景光没有产生阴影就略去了。下面的三个图是三种光源把球的阴影投影到平面上,为了让大家看清楚,加了一个辅助线,看清楚每种光源投影的方式,实际做项目的时候这个辅助线可以作为测试用的。
图1 平行光源投影
图2 点光源投影
图3 聚光灯投影
我们看下平行光投影代码
渲染环境中的阴影设置,开启shadowmap
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default
设置光源,然后光源的属性castShadow设置为true。
let light = new THREE.DirectionalLight( 0xffffff, 0.8);
light.position.</