关于javascript:手把手教你实现聚光灯效果

聚光灯 是一种非凡的点光源，它可能朝着一个方向投射光线。聚光灯投射出的是相似圆锥形的光线，这与咱们事实中看到的聚光灯是统一的。其灯光从一点收回，沿着某一个方向照耀出一个锥形光照范畴。聚光灯近似于一个有夹角范畴限定的点光源。聚光灯可用于数字孪生可视化场景中模仿舞台、汽车车头灯，手电筒，台灯等光源成果，可增加至 3D 容器、摄像机等对象下方，对其中所有对应的 数字孪生可视化 对象失效。
在数字孪生可视化场景中因为我的项目须要聚光灯是最常应用的光源之一，特地是如果咱们想要应用暗影的话也须要用到聚光灯。ThingJS 内的聚光灯能够用来模仿手电筒、车灯、等线性光照成果，从一个点向锥形范畴内发射光线，官网类型是 spotlight。

如果数字孪生可视化场景中指标物体是动静的，采纳 mousemove 鼠标挪动事件来实现目标物体静止。mousemove 事件是一个实时响应的事件，当鼠标指针的地位发生变化时（至多挪动一个像素），就会触发 mousemove 事件。该事件响应的灵敏度次要参考鼠标指针挪动速度的快慢以及浏览器跟踪更新的速度。官网在数字孪生可视化物体上方 5 米创立一个聚光灯，并让物体沿着门路方向一直循环，实现“追随物体”的聚光灯成果。光打在了挪动的物体上，照耀范畴和角度随着物体挪动变动而变动。
然而要留神数字孪生可视化场景中聚光灯过多会影响渲染性能。

具体代码如下：

var app = new THING.App({url: 'https://www.thingjs.com/static/models/storehouse',});
 
// 参数
var dataObj = {
 'type': 'SpotLight',
 'lightAngle': 30,
 'intensity': 1,
 'penumbra': 0.5,
 'castShadow': false,
 'position': null,
 'height': 0,
 'color': 0xFFFFFF,
 'distance': null,
 'target': null,
 'helper': true,
 'follow': true,
};
// 叉车
let car1;
let car2;
// 以后灯光
let curLight;
let curLightPosition;
// 创立聚光灯办法
function createSpotLight(position, target) {dataObj['lightAngle'] = 30;
 dataObj['intensity'] = 0.5;
 dataObj['penumbra'] = 0.5;
 dataObj['castShadow'] = false;
 dataObj['position'] = position;
 dataObj['distance'] = 25;
 dataObj['color'] = 0xFFFFFF;
 dataObj['helper'] = true;
 dataObj['follow'] = true;
 // 创立聚光灯
 var spotLight = app.create(dataObj);
 curLight = spotLight;
 curLightPosition = spotLight.position;
 createSpotLightControlPanel(spotLight);
 curLight.lookAt(car1);
}
 
/**
 * 灯光控制面板
 */
function createSpotLightControlPanel() {
 var panel = new THING.widget.Panel({
 isDrag: true,
 titleText: "灯光参数调整",
 width: '260px',
 hasTitle: true
 });
 // 设置 panel 地位 
 panel.position = [10, 35];
 panel.addNumberSlider(dataObj, 'lightAngle').caption('灯光角度').step(1).min(0).max(180).isChangeValue(true).on('change', function(value) {curLight.lightAngle = value;});
 panel.addNumberSlider(dataObj, 'intensity').caption('亮度').step(0.01).min(0).max(1).isChangeValue(true).on('change', function(value) {curLight.intensity = value;});
 panel.addNumberSlider(dataObj, 'penumbra').caption('半影').step(0.01).min(0).max(1).isChangeValue(true).on('change', function(value) {curLight.penumbra = value;});
 panel.addNumberSlider(dataObj, 'distance').caption('间隔').step(0.1).min(0).max(200).isChangeValue(true).on('change', function(value) {curLight.distance = value;});
 panel.addNumberSlider(dataObj, 'height').caption('高度').step(0.1).min(0).max(200).isChangeValue(true).on('change', function(value) {curLight.position = [curLightPosition[0], curLightPosition[1] + value, curLightPosition[2]];
 });
 panel.addBoolean(dataObj, 'castShadow').caption('影子').on('change', function(value) {curLight.castShadow = value;});
 panel.addBoolean(dataObj, 'helper').caption('辅助线').on('change', function(value) {curLight.helper = value;});
 panel.addBoolean(dataObj, 'follow').caption('追随物体').on('change', function(value) {if (value) {curLight.lookAt(car1);
 } else {curLight.lookAt(null);
 }
 });
 panel.addColor(dataObj, 'color').caption('色彩').on('change', function(value) {curLight.lightColor = value;});
 
}
 
/**
 * 注册鼠标挪动事件, 查看是否按下 'shift' 键, 按下设置聚光灯追随鼠标地位
 */
app.on('mousemove', function(ev) {if (!curLight) {return;}
 
 if (!ev.shiftKey) {return;}
 
 var pickedPosition = ev.pickedPosition;
 if (pickedPosition) {curLight.lookAt(pickedPosition);
 }
})
 
/**
 * 注册场景 load 事件
 */
app.on('load', function(ev) {// createTip();
 // 主灯强度设置为 0, 突出聚光灯成果
 app.lighting = {
 mainLight: {intensity: 0}
 };
 
 // 获取场景内 id 为 'car01' 和 'car02' 的叉车
 car1 = app.query('car01')[0];
 car2 = app.query('car02')[0];
 
 // 参数 1: 在 car2 上方 5 米创立一个聚光灯
 // 参数 2: 初始 target 设置为 car1 的地位
 createSpotLight(THING.Math.addVector(car2.position, [0, 5, 0]), car1.position);
 
 // 创立一个圆形门路
 var path = [];
 var radius = 6;
 for (var degree = 0; degree <= 360; degree += 10) {var x = Math.cos(degree * 2 * Math.PI / 360) * radius;
 var z = Math.sin(degree * 2 * Math.PI / 360) * radius;
 path.push(THING.Math.addVector(car1.position, [x, 0, z]));
 }
 // 让 car1 沿圆形门路静止
 car1.movePath({
 orientToPath: true, // 物体挪动时沿向门路方向
 path: path,
 time: 10 * 1000,
 loopType: THING.LoopType.Repeat // 循环类型
 });
 
 initThingJsTip("左侧面板可对灯光参数进行调整。按住 shift 键，聚光灯可追踪鼠标地位");
 $(".warninfo3").css("left", "55%");
})

—————————————————
数字孪生可视化：https://www.thingjs.com/