three.js SpotLight 光源产生阴影效果

介绍

THREE.SpotLight（聚光灯灯源）是最常使用的光源之一。THREE.SpotLight是一种具有锥形效果的光源。比如：手电筒

相关属性

属性	描述
angle（角度）	光源发射出的光束的宽度。单位是弧度，默认值为Math.PI/3
castShadow（投影）	如果设置为true，这个光源就会产生阴影
color（颜色）	光源的颜色
distance（距离）	光源照射的距离。默认为0，这意味着光线的强度不会随着距离增加而减弱
exponent（光强衰减指数）	使用THREE.SpotLight光源，发射的光线的强度随着光源距离的增加而减弱。exponent属性决定了光线前度递减的速度。使用低值，从光源发出的光线将到达远程的物体，而使用高值，光线仅能到达非常接近THREE.SpotLight光源的物体
intensity（强度）	光源找色的强度，默认为1
position（位置）	光源在场景中的位置
shadowBias（阴影偏移）	用来偏置阴影的位置。当你使用非常薄的对象时，可以使用它来解决一些奇怪的效果。如果你看到奇怪的阴影效果，将该属性设置为很小的值（如0.01）通常可以解决问题。此属性默认为0
shadowCameraFar（投影远点）	到距离光源的哪一个位置之内可以生产阴影。默认500
shadowCameraFov（投影视场）	用于生成阴影的视场有多大，默认50
shadowCameraNear（投影近点）	从距离光源的哪一个位置开始生成阴影，默认50
THREE.CameraHelper( light.shadow.camera )	如果该属性设置为“true”，你可以看到光源在哪里以及如何生成阴影的。默认值为“false”
shadowDarkness（阴影暗度）	定义了阴影徐然的暗度。在场景渲染之后无法更改，默认0.5
shadowMapWidth和shadowMapHeight（阴影映射宽度和阴影映射高度）	决定了有多少像素用来生成阴影。当阴影具有锯齿状边缘或看起来不光滑时，可以增加这个值。在场景渲染之后无法更改。
target（目标）	使用THREE.SpotLight光源时，它的指向很重要。使用target属性，你可以将THREE.SpotLight光源指向场景中特定对象或位置。注意，此属性需要一个THREE.Object3D对象（如THREE.Mesh）。
visible（是否可见）	如果该属性设置为“true”（默认值），该光源就会打开，如果设置为“false”，该光源就会关闭

 

 渲染器设置

    // 参数：抗锯齿
    this.renderer = new THREE.WebGLRenderer({antialias: true});
    //告诉renderer我们需要阴影(允许阴影隐射)
    this.renderer.shadowMap.enabled = true; 
    // 阴影边渲染出来更加模糊，比默认效果好
    this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;

场景物体设置 

this.plane.receiveShadow=true;//地面接受阴影 
this.cude.castShadow=true;//cast投射，就是方块投射阴影

灯光设置

    // new THREE.PointLight(颜色, 强度, 距离，开角);
    let pointLight = new THREE.SpotLight(0xffffff, 0.2, 100, Math.PI / 3);
    // 光源位置
    pointLight.position.set(60, 30, 0);
    // 开启阴影
    pointLight.castShadow = true;
    pointLight.distance = 100;
    pointLight.intensity = 1;// 光源强度
    // 光线衰减 默认 1
    pointLight.decay = 2;
    pointLight.penumbra = 1;
    // 阴影有点模糊下设置
    pointLight.shadow.mapSize.width = 1024;
    pointLight.shadow.mapSize.height = 1024;
    // pointLight.target = this.plane;//光照照向地面
    let lighthelp = new THREE.SpotLightHelper(pointLight, 0x00FF00);
    // 能看见光源位置
    let shadowCameraHelper = new THREE.CameraHelper(pointLight.shadow.camera);
    this.scene.add( shadowCameraHelper );
    this.scene.add(lighthelp);
    this.scene.add(pointLight);