请选择 进入手机版 | 继续访问电脑版
2021ThingJS数字孪生智慧场景可视化开发大赛获奖者专访
查看: 397|回复: 0

[分享] ThingJS之聚光灯,js开辟+控制面板轻松搭

[复制链接]
avatar

52

主题

57

帖子

79

积分

注册会员

Rank: 2

积分
79
ico_lz  楼主| 发表于 2020-9-29 18:44:01 | 显示全部楼层 |阅读模式

我们可以将聚光灯与手电筒大概灯笼发生的光停止对照。ThingJS新推动场景光源之聚光灯,js开辟+控制面板轻松连系。

光源 (Lights) 是每个场景的重要组成部分。网格和纹理决议了场景的外形和表面,而光源则决议了三维情况的色彩和空气。您能够会在每个场景中利用多个光源。让它们一路工作需要一些理论,但成果却相当惊人。

ThingJS之聚光灯,js开辟+控制面板轻松搭

ThingJS 供给一个模拟手电筒、车灯、等线性光照结果的光源—聚光灯,从一个点向锥形范围内发射光芒,官方范例是spotlight。

聚光灯是3D天下中的一种光源范例,其灯光从一点发出,沿着某一个偏向照耀出一个锥形光照范围。聚光灯近似于一个有夹角范围限制的点光源。聚光灯可用于模拟舞台、汽车车头灯,手电筒,台灯等光源结果,可增加至3D容器、摄像机等工具下方,对其中一切对应的工具生效。


聚光灯属性先容

灯光角度

聚光灯的灯光聚光角度。

亮度

光芒的明亮水平。

半影

投射光芒边沿的虚化,默以为0,不模糊。

间隔

光源照耀的间隔。默以为0,假如为0,暗示光源不受间隔影响,可照耀至无穷远。

高度

光源照耀的高度。聚光灯有偏向和位置,而且以圆锥的外形制造灯光。

影子

光源被物体所遮蔽而发生阴影结果,默许封闭。

帮助线

默许显现。这类灯光从一点发出,在一个偏向依照—个锥形的范围照耀,显现圆锥的外形。

跟从物体

经过设定追踪工具,可将该聚光灯设定为追光灯。

色彩

光芒的色彩,工具的色彩受光芒色彩影响。

ThingJS之聚光灯,js开辟+控制面板轻松搭

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,轻松开辟场景光源结果。


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则