聚光灯

聚光灯：这种光源的光线从一个锥体中射出，在被照射的物体上产生聚光的效果。使用这种光源需要指定光的射出方向以及锥体的顶角α。聚光灯示例如图所示：

聚光灯特点：
- 是最常使用的光源之一（特别是如果你想要使用阴影的话）
- 是一种具有锥形效果的光源
- 该光源产生的光具有方向和角度
构造函数

THREE.SpotLight = function ( color, intensity, distance, angle, exponent, decay )

color: 光源的颜色
intensity: 光源的强度，默认是1.0，如果为0.5，则强度是一半，意思是颜色会淡一些。和之前的点光源一样。
distance：光线的强度(照射的距离)，从最大值衰减到0，需要的距离。默认为0，表示光不衰减，如果非0，则表示从光源的位置到Distance的距离，光都在线性衰减。到离光源距离Distance时，光源强度为0.
angle：聚光灯着色的角度，用弧度作为单位，这个角度是和光源的方向形成的角度。
exponent：光源模型中，衰减的一个参数，值越大衰减越快。
decay：光源强度随着离开光源的距离而衰减的速度。该值为2时更接近现实世界中的效果。

实战

我们创建一个聚光灯，并通过gui控制对应的属性

let param;
let light;
let lightPos
function initLight() {
    var ParamObj = function () {
        this.x = 0;
        this.y = 0;
        this.z = 700;
        this.intensity = 1; // 光源强度
        this.distance = 0; // 光线强度
        this.angle = 45; // 光源角度
        this.exponent = 10; // 衰减速度
        this.decay = 1; // 衰减强度
    }
    param = new ParamObj();
    var gui = new dat.GUI();
    gui.add(param, "x", -10000, 10000).name('点光源X的位置')
    gui.add(param, "y", -10000, 10000).name('点光源Y的位置')
    gui.add(param, "z", -2000, 2000).name('点光源Z的位置')
    gui.add(param, "intensity", 0, 1).name('光源强度')
    gui.add(param, "distance", 0, 1).name('光线强度')
    gui.add(param, "angle", 0, 360).name('光源角度')
    gui.add(param, "exponent", 0, 100).name('衰减速度')
    gui.add(param, "decay", 0, 1).name('衰减强度')
    // 点光源定义为红色
    light = new THREE.SpotLight(0xFF0000, param.intensity, param.distance, param.angle, param.exponent, param.decay);
    light.position.set(param.x, param.y, param.z)
    light.castShadow = true
    scene.add(light)
}

function changeLightPos() {
    light.position.set(param.x, param.y, param.z);
    light.intensity = param.intensity
    light.distance = param.distance
    light.angle = param.angle
    light.exponent = param.exponent
    light.decay = param.decay
}

我们修改对应的参数，可以看到光的变化，目前还没有模拟出阴影效果，不知道是哪里出了问题。 codepen示例代码

总结

这一节我们主要讲了以下内容：

聚光灯介绍
实战使用聚光灯

ThreeJs入门15-光的初体验-聚光灯

聚光灯

实战

总结