threejs中的阴影

1.效果

2.实现要求

渲染器开启阴影渲染
this.renderer.shadowMap.enabled = true;
灯光需要开启“引起阴影”
dirLight.castShadow = true
物体需要开启“引起阴影”
svg.castShadow = true
平面开启“接受阴影”
plane.receiveShadow = true

shadowMap.autoUpdate : Boolean
启用场景中的阴影自动更新。默认是true，如果不需要动态光照/阴影, 则可以在实例化渲染器时将之设为false
shadowMap.needsUpdate : Boolean
当被设为true, 场景中的阴影贴图会在下次render调用时刷新。默认是false，如果你已经禁用了阴影贴图的自动更新(shadowMap.autoUpdate = false), 那么想要在下一次渲染时更新阴影的话就需要将此值设为true
shadowMap.type : Integer
定义阴影贴图类型 (未过滤, 关闭部分过滤, 关闭部分双线性过滤)
可选值有
THREE.BasicShadowMap：能够给出没有经过过滤的阴影映射 —— 速度最快，但质量最差
THREE.PCFShadowMap (默认) ：使用Percentage-Closer Filtering (PCF)算法来过滤阴影映射
THREE.PCFSoftShadowMap：使用Percentage-Closer Soft Shadows (PCSS) 算法来过滤阴影映射

3.遇到的问题以及解决方法

上面都设置好了，但是就是没有阴影。

（一）plane的材质不对

一开始设置的材质是new this.THREE.MeshBasicMaterial({})，发现并没有什么效果。
后来修改之后new this.THREE.MeshLambertMaterial({})就可以啦。

（二）平行光设置

	 let dirLight = new this.THREE.DirectionalLight(0x666666)
	 dirLight.position.set(500,500,500)
     dirLight.shadow.camera.near = 2;
     dirLight.shadow.camera.far = 2000;
     dirLight.shadow.camera.left = -1000;
     dirLight.shadow.camera.right = 1000;
     dirLight.shadow.camera.top = 1000;
     dirLight.shadow.camera.bottom = -1000;

这里规定了平行光产生阴影的投影范围。
这里存在物体不在平行光投影范围内的情况，这里推荐使用灯光和阴影的helper。

	  // 灯光，可以画出一个灯光的位置
	  var helper02 = new this.THREE.PointLightHelper(dirLight, 6);
      this.scene.add(helper02);
      // 阴影，可以给出阴影的范围
      var helper = new this.THREE.CameraHelper( dirLight.shadow.camera );
      this.scene.add( helper );

加上helper之后显示效果如下：