手把手教你实现聚光灯效果

聚光灯是一种特殊的点光源，它能够朝着一个方向投射光线。聚光灯投射出的是类似圆锥形的光线，这与我们现实中看到的聚光灯是一致的。其灯光从一点发出，沿着某一个方向照射出一个锥形光照范围。聚光灯近似于一个有夹角范围限定的点光源。聚光灯可用于数字孪生可视化场景中模拟舞台、汽车车头灯，手电筒，台灯等光源效果，可添加至3D容器、摄像机等对象下方，对其中所有对应的数字孪生可视化对象生效。

在数字孪生可视化场景中因为项目需要聚光灯是最常使用的光源之一，特别是如果我们想要使用阴影的话也需要用到聚光灯。ThingJS内的聚光灯可以用来模拟手电筒、车灯、等线性光照效果，从一个点向锥形范围内发射光线，官方类型是spotlight。

如果数字孪生可视化场景中目标物体是动态的，采用mousemove鼠标移动事件来实现目标物体运动。mousemove 事件是一个实时响应的事件，当鼠标指针的位置发生变化时（至少移动一个像素），就会触发 mousemove 事件。该事件响应的灵敏度主要参考鼠标指针移动速度的快慢以及浏览器跟踪更新的速度。官方在数字孪生可视化物体上方5米创建一个聚光灯，并让物体沿着路径方向不断循环，实现“跟随物体”的聚光灯效果。光打在了移动的物体上，照射范围和角度随着物体移动变化而变化。

但是要注意数字孪生可视化场景中聚光灯过多会影响渲染性能。

具体代码如下：