众所周知,小地图在游戏中非常重要,小地图用来显示周围的环境信息。在数字孪生可视化场景中,场景中也经常使用小地图来展示地图或者当前场景的透视图。首先,小地图以主角为中心。其次,小地图上应使用图标代替人物或物体的真实模型,因为小地图通常太小,看不清真实模型。网上有很多制作小地图的方法。这里我使用ThingJS来实现数字孪生可视化场景小地图的功能。可用于展示当前数字孪生可视化场景的地图或透视图,方便且无需额外插件。ThingJS利用系统内置的控件来集成一些功能应用的开发,也可以自定义开发控件来封装一些功能模块。大多数小地图都是方形的,因此本文也将在数字孪生可视化场景中创建方形小地图。原理很简单:在数字孪生可视化场景中创建两个摄像头,然后将摄像头1的位置传递给摄像头2。通常会根据需要在小地图周围添加一些按钮和标签。第一步加载数字孪生可视化场景;第二步,设置两个摄像头的位置、距离、角度等;第三步,添加小地图控件;第四步是根据需要添加按钮。具体代码如下:varapp=newTHING.App({url:'https://www.thingjs.com/static/models/storehouse'});varcontrol;app.on('load',function(){app.camera.distanceLimited=[0,50];//设置相机距离范围[最小值,最大值]app.camera.xAngleLimitRange=[10,80];//限制相机俯仰角[最小值value,maximumvalue]//设置摄像机位置和目标点app.camera.position=[-21.874885906496672,25.144446501358352,32.15174699792633];app.camera.target=[1.074795849331875,0.9467607412215804,2.8844752703106087];newTHING.widget.Button('添加控件',add_control);newTHING.widget.Button('Reset',remove_control);});/***添加控件*/functionadd_control(){if(control)return;control=newTHING.MiniMapControl({width:200,height:200,position:THING.CornerType.RightBottom,opacity:0.8,cameraViewImg:'https://www.thingjs.com/static/images/minimap1.png',cameraCenterImg:'https://www.thingjs.com/static/images/minimap0.png',//hasClose:true,//是否有关闭按钮(默认没有),点击关闭按钮时,小地图启用为假//closeBtnImg:'https://www.thingjs.com/static/images/minimap2.png'})//添加小地图控件app.addControl(control);}/***移除控件*/functionremove_control(){if(control){app.removeControl(control);控制=空;//control.minimap.enable=!control.minimap.enable;//显示和隐藏小地图}}————————————————————数字孪生可视化:https://www.thingjs.com/
