ThingJS之聚光灯，js开发+控制面板轻松搭

我们可以将聚光灯与手电筒或者灯笼产生的光进行对比。ThingJS新推出场景光源之聚光灯，js开发+控制面板轻松结合。

光源 (Lights) 是每个场景的重要组成部分。网格和纹理决定了场景的形状和外观，而光源则决定了三维环境的颜色和氛围。您可能会在每个场景中使用多个光源。让它们一起工作需要一些实践，但结果却相当惊人。

ThingJS 提供一个模拟手电筒、车灯、等线性光照效果的光源—聚光灯，从一个点向锥形范围内发射光线，官方类型是spotlight。

聚光灯是3D世界中的一种光源类型，其灯光从一点发出，沿着某一个方向照射出一个锥形光照范围。聚光灯近似于一个有夹角范围限定的点光源。聚光灯可用于模拟舞台、汽车车头灯，手电筒，台灯等光源效果，可添加至3D容器、摄像机等对象下方，对其中所有对应的对象生效。

聚光灯属性介绍

灯光角度

聚光灯的灯光聚光角度。

亮度

光线的明亮程度。

半影

投射光线边缘的虚化，默认为0，不模糊。

距离

光源照射的距离。默认为0，如果为0，表示光源不受距离影响，可照射至无穷远。

高度

光源照射的高度。聚光灯有方向和位置，并且以圆锥的形状制造灯光。

影子

光源被物体所遮蔽而产生阴影效果，默认关闭。

辅助线

默认显示。这种灯光从一点发出，在一个方向按照—个锥形的范围照射，呈现圆锥的形状。

跟随物体

通过设定追踪对象，可将该聚光灯设定为追光灯。

颜色

光线的颜色，对象的颜色受光线颜色影响。

3dmax之中，聚光灯是室内打光的基础，这种类型的3dmax灯光可以方便我们快速提亮目标区域的亮度，如果目标物体是动态的呢？官方采用JS mousemove鼠标移动事件来实现目标物体运动。

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

跟随物体的聚光灯代码示例如下。完整版请登录ThingJS平台-场景效果-聚光灯查看。

1. var app = new THING.App({
2. url: 'https://www.thingjs.com/static/models/storehouse',
3. });
4. // 参数
5. var dataObj = {
6. 'type': 'SpotLight',
7. 'lightAngle': 30,
8. 'intensity': 1,
9. 'penumbra': 0.5,
10. 'castShadow': false,
11. 'position': null,
12. 'height': 0,
13. 'color': 0xFFFFFF,
14. 'distance': null,
15. 'target': null,
16. 'helper': true,
17. };
18. // 叉车
19. let car1;
20. let car2;
21. // 当前灯光
22. let curLight;
23. let curLightPosition;
24. // 创建聚光灯方法
25. function createSpotLight(position, target) {
26. dataObj['lightAngle'] = 30;
27. dataObj['intensity'] = 0.5;
28. dataObj['penumbra'] = 0.5;
29. dataObj['castShadow'] = false;
30. dataObj['position'] = position;
31. dataObj['distance'] = 25;
32. dataObj['color'] = 0xFFFFFF;
33. dataObj['helper'] = true;
34. dataObj['follow'] = false;
35. //创建聚光灯
36. var spotLight = app.create(dataObj);
37. curLight = spotLight;
38. curLightPosition = spotLight.position;
39. createSpotLightControlPanel(spotLight);
40. }
41. ……
42. // 注册鼠标移动事件,检查是否按下'shift'键, 按下设置聚光灯跟随鼠标位置
43. app.on('mousemove', function (ev) {
44. if (!curLight) {
45. return;
46. }
47. if (!ev.shiftKey) {
48. return;
49. }
50. var pickedPosition = ev.pickedPosition;
51. if (pickedPosition) {
52. curLight.lookAt(pickedPosition);
53. }
54. })
55. // 注册场景load事件
56. app.on('load', function (ev) {
57. // 主灯强度设置为0,突出聚光灯效果
58. app.lighting = {
59. mainLight: {
60. intensity: 0
61. }
62. };
63. // 获取场景内id为'car01' 和 'car02' 的叉车
64. car1 = app.query('car01')[0];
65. car2 = app.query('car02')[0];
66. // 参数1: 在car2上方5米创建一个聚光灯
67. // 参数2: 初始target设置为car1的位置
68. createSpotLight(THING.Math.addVector(car2.position, [0, 5, 0]), car1.position);
69. // 创建一个圆形路径
70. var path = [];
71. var radius = 6;
72. for (var degree = 0; degree <= 360; degree += 10) {
73. var x = Math.cos(degree * 2 * Math.PI / 360) * radius;
74. var z = Math.sin(degree * 2 * Math.PI / 360) * radius;
75. path.push(THING.Math.addVector(car1.position, [x, 0, z]));
76. }
77. // 让 car1 沿圆形路径运动
78. car1.movePath({
79. orientToPath: true, // 物体移动时沿向路径方向
80. path: path,
81. time: 10 * 1000,
82. // 循环类型
83. // THING.LoopType.Repeat 不断循环
84. // THING.LoopType.PingPong 往复循环
85. loopType: THING.LoopType.Repeat
86. });
87. console.log("按住'shift' 聚光灯可以追踪鼠标位置(开启'跟随物体'后失效)");
88. })

复制代码

ThingJS，轻松开发场景光源效果。