threejs中的阴影

1.效果

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之后显示效果如下:
threejs中的阴影_第2张图片

你可能感兴趣的:(前端)