聚光灯是一种特殊的点光源,可以将光线投射到一个方向。聚光灯投射出锥状光线,与我们在现实中看到的聚光灯一致。它的光从一个点发出,在一定方向上照射出一个光锥。聚光灯类似于角度范围有限的点光源。聚光灯可用于模拟数字孪生可视化场景中的舞台、汽车大灯、手电筒、台灯等光源效果,并可添加在3D容器、相机等对象下,对所有对应的数字孪生可视化对象生效。在数字孪生可视化场景中,聚光灯是最常用的光源之一,因为项目需要聚光灯,特别是如果我们要使用阴影,聚光灯也是需要的。ThingJS中的聚光灯可以用来模拟手电筒、车灯等线状灯光效果,从一个点向一个锥形范围内发射光线。官方类型是聚光灯。如果数字孪生可视化场景中的目标对象是动态的,则使用mousemove鼠标移动事件实现目标对象的移动。mousemove事件是一个实时响应事件。当鼠标指针的位置发生变化时(至少移动了一个像素),就会触发mousemove事件。这个事件响应的灵敏度主要是指鼠标指针移动的速度和浏览器跟踪更新的速度。官方在数字孪生体可视化物体上方5米处创建了一个聚光灯,让物体沿着路径方向不断循环,实现“跟随物体”的聚光灯效果。光线照射到移动的物体上,照射范围和角度随着物体的移动而变化。但需要注意的是,数字孪生可视化场景中过多的聚光灯会影响渲染性能。具体代码如下:varapp=newTHING.App({url:'https://www.thingjs.com/static/models/storehouse',});//参数vardataObj={'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,};//forkliftletcar1;letcar2;//当前灯letcurLight;letcurLightPosition;//创建聚光灯方法functioncreateSpotLight(position,target){dataObj['lightAngle']=30;dataObj['强度']=0.5;dataObj['半影']=0.5;dataObj['castShadow']=false;dataObj['位置']=位置;dataObj['距离']=25;dataObj['颜色']=0xFFFFFF;dataObj['helper']=true;dataObj['关注']=true;//创建聚光灯varspotLight=app.create(dataObj);curLight=聚光灯;curLightPosition=spotLight.position;创建聚光灯控制面板(聚光灯);curLight.lookAt(car1);}/***灯光控制面板*/functioncreateSpotLightControlPanel(){varpanel=newTHING.widget.Panel({isDrag:true,titleText:"灯光参数调整",width:'260px',hasTitle:true});//设置面板位置panel.position=[10,35];panel.addNumberSlider(dataObj,'lightAngle').caption('灯角度').step(1).min(0).max(180).isChangeValue(true).on('change',function(value){curLight.lightAngle=值;});panel.addNumberSlider(dataObj,'intensity').caption('亮度').step(0.01).min(0).max(1).isChangeValue(true).on('change',function(value){curLight.intensity=值;});panel.addNumberSlider(dataObj,'半影').caption('半影').step(0.01).min(0).max(1).isChangeValue(true).on('change',function(value){curLight.penumbra=值;});panel.addNumberSlider(dataObj,'distance').caption('距离').step(0.1).min(0).max(200).isChangeValue(true).on('change',function(value){curLight.distance=值;});panel.addNumberSlider(dataObj,'height').caption('高度').step(0.1).min(0).max(200).isChangeValue(true).on('change',function(value){curLight.position=[curLightPosition[0],curLightPo位置[1]+值,curLightPosition[2]];});panel.addBoolean(dataObj,'castShadow').caption('shadow').on('change',function(value){curLight.castShadow=value;});panel.addBoolean(dataObj,'helper').caption('辅助线').on('change',function(value){curLight.helper=value;});panel.addBoolean(dataObj,'follow').caption('followobject').on('change',function(value){if(value){curLight.lookAt(car1);}else{curLight.lookAt(null);}});面板.addColor(dataObj,'color').caption('color').on('change',function(value){curLight.lightColor=value;});}/***注册鼠标移动事件,检查是否按下'shift'键,按下设置聚光灯跟随鼠标位置*/app.on('mousemove',function(ev){if(!curLight){return;}if(!ev.shiftKey){return;}varpickedPosition=ev.pickedPosition;if(pickedPosition){curLight.lookAt(pickedPosition);}})/***注册场景加载事件*/app.on('load',function(ev){//createTip();//主光强度设置为0,突出聚光灯效果app.lighting={mainLight:{intensity:0}};//获取forkliftcar1=apwithids'car01'and'car02'inthescenep.query('car01')[0];car2=app.query('car02')[0];//参数1:在car2上方5米处创建聚光灯//参数2:将初始目标设置为car1PositioncreateSpotLight(THING.Math.addVector(car2.position,[0,5,0]),car1.position);//创建一个循环路径varpath=[];可变半径=6;for(vardegree=0;degree<=360;degree+=10){varx=Math.cos(degree*2*Math.PI/360)*radius;varz=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%");})——————————————————NumberTwin可视化:https://www.thingjs.com/
