从零开始学习3D可视化之2D界面从零开始学习3D可视化之2D界面

在ThingJS中搭建的数字孪生可视化场景都是放在3D“容器”内的，3D“容器”提供了3D和2D的界面展示能力。上篇文章浅析过了3D空间界面，下面我继续学习一下2D界面如何与3D界面连接。ThingJS内置了div2d和div3d元素，创建2D界面时需要将元素插入到 div2d。
创建 UIAnchor UIAnchor可以把 2D html 界面连接到 3D 物体上，跟随 3D 物体移动。需要注意的是删除后，其对应的 panel 也会被删除。

var uiAnchor = 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 界面并将其添加到页面中。
点击数字孪生可视化场景中的物体，页面中的文字会显示所点击的数字孪生可视化物体名称。点击页面中的按钮会进入相应物体的层级，进入层级后右键返回上一级。

文章图片

具体代码如下：

var app = new THING.App({ url: 'https://www.thingjs.com/static/models/storehouse' }); app.on('load', function (ev) { app.level.change(ev.campus); }) create_html(); // 利用模板字符串创建页面元素 function create_html() { var template = ` Hello World! `; // 插入到 ThingJS 内置的 2D 界面 div 中 $('#div2d').append($(template)); } app.on(THING.EventType.SingleClick, function (ev) { if (ev.picked && ev.object) { var obj = ev.object; var name = obj.name; changeText(name); } }) function changeText(value) { document.getElementById("p1").innerHTML = value; } function changeLevel() { var value = https://www.it610.com/article/document.getElementById("p1").innerHTML; var obj = app.query(value)[0]; if (obj) { app.level.change(obj); } }

大标题快捷界面库
即使是 2D界面，照样可以把它连接到 3D 物体上，跟随 3D 物体移动。ThingJS提供一个“快捷界面库”，可快速创建界面。通过快捷界面库，可以创建 Panel 以 UIAnchor 的方式连接到数字孪生可视化物体上。点击按钮可以创建、删除 UIAnchor。

文章图片

具体代码如下：

var app = new THING.App({ url: 'https://www.thingjs.com/static/models/storehouse' }); // 创建按钮 function createUI() { new THING.widget.Button('物体界面', test_create_ui); new THING.widget.Button('位置界面', test_create_ui_at_point); new THING.widget.Button('删除界面', test_destroy_ui); } createUI(); // 添加html function create_html() { var sign = `物体数值 0.14MPa` $('#div3d').append($(sign)); } create_html(); // 生成一个新面板 function create_element() { var srcElem = document.getElementById('board'); var newElem = srcElem.cloneNode(true); newElem.style.display = "block"; app.domElement.insertBefore(newElem, srcElem); return newElem; } // 物体顶界面 var ui = null; function test_create_ui() { ui = app.create({ type: 'UIAnchor', parent: app.query('car02')[0], element: create_element(), localPosition: [0, 2, 0], pivot: [0.5, 1] // [0,0]即以界面左上角定位，[1,1]即以界面右下角进行定位 }); } // 位置界面 var ui2 = null; function test_create_ui_at_point() { ui2 = app.create({ type: 'UIAnchor', element: create_element(), position: [0, 1, 0] }); } // 删除界面 function test_destroy_ui() { if (ui) { ui.destroy(); ui = null; } if (ui2) { ui2.destroy(); ui2 = null; } }

【从零开始学习3D可视化之2D界面】THING.widget 是一个支持动态数据绑定的轻量级界面库。可通过界面库中的 Panel 组件创建一个面板，并可向该面板中添加文本、数字、单选框、复选框等其他组件。ThingJS支持很多面板效果，在此我就不一一列举了，大家感兴趣可以自己试一下~
—————————————————
数字孪生可视化：https://www.thingjs.com/