从零开始学习3D可视化的2D界面
时间：2023-03-30 14:40:08
CSS
ThingJS内置的数字孪生可视化场景，全部放在3D“容器”中，提供3D和2D界面展示能力。上一篇文章简单分析了3D空间界面。接下来，我将继续学习如何将2D界面与3D界面连接起来。ThingJS内置了div2d和div3d元素，创建2D界面时需要将元素插入到div2d中。创建UIAnchorUIAnchor可以将2Dhtml界面连接到3D对象并随3D对象一起移动。需要注意的是，删除后，其对应的面板也会被删除。varuiAnchor=app.create({type:"UIAnchor",parent:app.query("car02")[0],element:document.getElementById("XXXX"),localPosition:[0,2,0],pivotPixel:[-16,109]});//删除UIAnchor//uiAnchor.destroy();//控制显示//uiAnchor.visible=true;模板字符串可用于创建2D界面并将其添加到页面中。点击数字孪生可视化场景中的某个对象，页面文字会显示被点击的数字孪生可视化对象的名称。点击页面上的按钮进入对应对象的关卡，进入关卡后右键返回上一关卡。具体代码如下：varapp=newTHING.App({url:'https://www.thingjs.com/static/models/storehouse'});app.on('load',function(ev){app.level.change(ev.campus);})create_html();//使用模板字符串创建页面元素functioncreate_html(){vartemplate=`你好，世界！
进入关卡 `;//插入到ThingJS内置的2D界面div$('#div2d').append($(template));}app.on(THING.EventType.SingleClick,function(ev){if(ev.picked&&ev.object){varobj=ev.object;varname=obj.name;changeText(name);}})functionchangeText(value){document.getElementById("p1").innerHTML=value;}functionchangeLevel(){varvalue=document.getElementById("p1").innerHTML;varobj=app.query(value)[0];如果（obj）{app.level.chan通用电气（对象）；}}HeadlineShortcutInterfaceLibrary即使是2D界面，也可以连接3D对象，随3D对象一起移动。ThingJS提供了一个“快捷界面库”来快速创建界面。通过快捷接口库，可以创建一个Panel，以UIAnchor的形式连接到数字孪生可视化对象。单击按钮创建和删除UIAnchor。具体示例如下：varapp=newTHING.App({url:'https://www.thingjs.com/static/models/storehouse'});//createUIfunctioncreateUI(){newTHING.widget.Button('objectinterface',test_create_ui);newTHING.widget.Button('定位界面',test_create_ui_at_point);newTHING.widget.Button('界面清晰',test_destroy_ui);}createUI();//添加htmlfunctioncreate_html(){varsign=`
物体 