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

原创

于 2021-07-19 14:51:45 发布 · 1.9k 阅读

收录于

在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();
 
// 利用模板字符串 创建页面元素