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

在ThingJS中搭建的数字孪生可视化场景都是放在3D“容器”内的，3D“容器”提供了3D和2D的界面展示能力。上篇文章浅析过了3D空间界面，下面我继续学习一下2D界面如何与3D界面连接。ThingJS内置了div2d和div3d元素，创建2D界面时需要将元素插入到 div2d。

创建 UIAnchor
UIAnchor可以把 2D html 界面连接到 3D 物体上，跟随 3D 物体移动。需要注意的是删除后，其对应的 panel 也会被删除。

1. var uiAnchor = app.create({
   
2. type: "UIAnchor",
   
3. parent: app.query("car02")[0],
   
4. element: document.getElementById("XXXX"),
   
5. localPosition: [0, 2, 0],
   
6. pivotPixel: [-16, 109]
   
7. });
   
8. 
   
9. // 删除UIAnchor
   
10. // uiAnchor.destroy();
    
11. 
    
12. // 控制显示
    
13. // uiAnchor.visible = true;

复制代码

可以利用模板字符串创建一个 2D 界面并将其添加到页面中。

点击数字孪生可视化场景中的物体，页面中的文字会显示所点击的数字孪生可视化物体名称。点击页面中的按钮会进入相应物体的层级，进入层级后右键返回上一级。





具体代码如下：

1. var app = new THING.App({
   
2. url: 'https://www.thingjs.com/static/models/storehouse'
   
3. });
   
4. 
   
5. app.on('load', function (ev) {
   
6. app.level.change(ev.campus);
   
7. })
   
8. 
   
9. create_html();
   
10. 
    
11. // 利用模板字符串 创建页面元素
    
12. function create_html() {
    
13. var template =
    
14. `<div style='position:absolute;left:20px;top:20px;padding: 8px;width:100px;text-align: center;background: rgba(0,0,0,0.5);'>
    
15. <p id="p1" style='color:white'>Hello World!</p>
    
16. <button style='margin:4px;padding:4px' onclick='changeLevel()'>Into Level</button>
    
17. </div>`;
    
18. // 插入到 ThingJS 内置的 2D 界面 div 中
    
19. $('#div2d').append($(template));
    
20. }
    
21. 
    
22. app.on(THING.EventType.SingleClick, function (ev) {
    
23. if (ev.picked && ev.object) {
    
24. var obj = ev.object;
    
25. var name = obj.name;
    
26. 
    
27. changeText(name);
    
28. }
    
29. })
    
30. 
    
31. function changeText(value) {
    
32. document.getElementById("p1").innerHTML = value;
    
33. }
    
34. 
    
35. function changeLevel() {
    
36. var value = document.getElementById("p1").innerHTML;
    
37. var obj = app.query(value)[0];
    
38. if (obj) {
    
39. app.level.change(obj);
    
40. }
    
41. }

复制代码

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





具体代码如下：

1. var app = new THING.App({
   
2.     url: 'https://www.thingjs.com/static/models/storehouse'
   
3. });
   
4. 
   
5. // 创建按钮
   
6. function createUI() {
   
7. new THING.widget.Button('物体界面', test_create_ui);
   
8. new THING.widget.Button('位置界面', test_create_ui_at_point);
   
9. new THING.widget.Button('删除界面', test_destroy_ui);
   
10. }
    
11. createUI();
    
12. 
    
13. // 添加html
    
14. function create_html() {
    
15. var sign =
    
16. `<div class="sign" id="board" style="font-size: 12px;width: 120px;text-align: center;background-color: rgba(0, 0, 0, .6);border: 3px solid #eeeeee;border-radius: 8px;color: #eee;position: absolute;top: 0;left: 0;z-index: 10;display: none;">
    
17.             <div class="s1" style="margin: 5px 0px 5px 0px;line-height: 32px;overflow: hidden;">
    
18.                 <span class="span-l icon" style="float: left;width: 30px;height: 30px;background:url(https://www.thingjs.com/static/images/example/hydrant.png) no-repeat center;margin: 1px 1px 1px 5px;"></span>
    
19.                 <span class="span-l font" style="float: left;margin: 0px 0px 0px 3px;">物体</span>
    
20.                 <span class="span-r point" style="float: right;width: 12px;height: 12px;background-color: #18EB20;border-radius: 50%;margin: 10px 5px 10px 0px;"></span>
    
21.             </div>
    
22.             <div class="s2" style="margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;">
    
23.                 <span class="span-l font1" style="float: left;margin: 0px 10px 0px 10px;">数值</span>
    
24.                 <span class="span-l font2" style="float: left;width: 70px;background-color: #2480E3;">0.14MPa</span>
    
25.             </div>
    
26.             <div class="point-top" style="position: absolute;top: -7px;right: -7px;background-color: #3F6781;width: 10px;height: 10px;border: 3px solid #eee;border-radius: 50%;"></div>
    
27.         </div>`
    
28.     $('#div3d').append($(sign));
    
29. }
    
30. create_html();
    
31. 
    
32. // 生成一个新面板
    
33. function create_element() {
    
34. var srcElem = document.getElementById('board');
    
35. var newElem = srcElem.cloneNode(true);
    
36.     newElem.style.display = "block";
    
37.     app.domElement.insertBefore(newElem, srcElem);
    
38. return newElem;
    
39. }
    
40. 
    
41. // 物体顶界面
    
42. var ui = null;
    
43. function test_create_ui() {
    
44.     ui = app.create({
    
45.         type: 'UIAnchor',
    
46.         parent: app.query('car02')[0],
    
47.         element: create_element(),
    
48.         localPosition: [0, 2, 0],
    
49.         pivot: [0.5, 1] // [0,0]即以界面左上角定位，[1,1]即以界面右下角进行定位
    
50. });
    
51. }
    
52. 
    
53. // 位置界面
    
54. var ui2 = null;
    
55. function test_create_ui_at_point() {
    
56.     ui2 = app.create({
    
57.         type: 'UIAnchor',
    
58.         element: create_element(),
    
59.         position: [0, 1, 0]
    
60. });
    
61. }
    
62. 
    
63. // 删除界面
    
64. function test_destroy_ui() {
    
65. if (ui) {
    
66.         ui.destroy();
    
67.         ui = null;
    
68. }
    
69. if (ui2) {
    
70.         ui2.destroy();
    
71.         ui2 = null;
    
72. }
    
73. }

复制代码

THING.widget 是一个支持动态数据绑定的轻量级界面库。可通过界面库中的 Panel 组件创建一个面板，并可向该面板中添加文本、数字、单选框、复选框等其他组件。ThingJS支持很多面板效果，在此我就不一一列举了，大家感兴趣可以自己试一下~

—————————————————

数字孪生可视化：https://www.thingjs.com/