请选择 进入手机版 | 继续访问电脑版
2021ThingJS数字孪生智慧场景可视化开发大赛获奖者专访
查看: 536|回复: 0

[分享] 从零起头进修3D可视化之2D界面

[复制链接]
avatar

40

主题

40

帖子

283

积分

中级会员

Rank: 3Rank: 3

积分
283
ico_lz  楼主| 发表于 2021-7-19 15:19:19 | 显示全部楼层 |阅读模式
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. // 删除UIAnchor
  9. // uiAnchor.destroy();

  10. // 控制显现
  11. // uiAnchor.visible = true;
复制代码


可以操纵模板字符串建立一个 2D 界面并将其增加到页面中。

点击数字孪生可视化场景中的物体,页面中的笔墨会显现所点击的数字孪生可视化物体称号。点击页面中的按钮会进入响应物体的层级,进入层级后右键返回上一级。

从零起头进修3D可视化之2D界面



具体代码以下:

  1. var app = new THING.App({
  2. url: 'https://www.thingjs.com/static/models/storehouse'
  3. });

  4. app.on('load', function (ev) {
  5. app.level.change(ev.campus);
  6. })

  7. create_html();

  8. // 操纵模板字符串 建立页面元素
  9. function create_html() {
  10. var template =
  11. `<div style='position:absolute;left:20px;top:20px;padding: 8px;width:100px;text-align: center;background: rgba(0,0,0,0.5);'>
  12. <p id="p1" style='color:white'>Hello World!</p>
  13. <button style='margin:4px;padding:4px' onclick='changeLevel()'>Into Level</button>
  14. </div>`;
  15. // 插入到 ThingJS 内置的 2D 界面 div 中
  16. $('#div2d').append($(template));
  17. }

  18. app.on(THING.EventType.SingleClick, function (ev) {
  19. if (ev.picked && ev.object) {
  20. var obj = ev.object;
  21. var name = obj.name;

  22. changeText(name);
  23. }
  24. })

  25. function changeText(value) {
  26. document.getElementById("p1").innerHTML = value;
  27. }

  28. function changeLevel() {
  29. var value = document.getElementById("p1").innerHTML;
  30. var obj = app.query(value)[0];
  31. if (obj) {
  32. app.level.change(obj);
  33. }
  34. }
复制代码


快速界面库
即使是 2D界面,还是可以把它毗连到 3D 物体上,跟从 3D 物体移动。ThingJS供给一个“快速界面库”,可快速建立界面。经过快速界面库,可以建立 Panel 以 UIAnchor 的方式毗连到数字孪生可视化物体上。点击按钮可以建立、删除 UIAnchor。

从零起头进修3D可视化之2D界面



具体代码以下:

  1. var app = new THING.App({
  2.     url: 'https://www.thingjs.com/static/models/storehouse'
  3. });

  4. // 建立按钮
  5. function createUI() {
  6. new THING.widget.Button('物体界面', test_create_ui);
  7. new THING.widget.Button('位置界面', test_create_ui_at_point);
  8. new THING.widget.Button('删除界面', test_destroy_ui);
  9. }
  10. createUI();

  11. // 增加html
  12. function create_html() {
  13. var sign =
  14. `<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;">
  15.             <div class="s1" style="margin: 5px 0px 5px 0px;line-height: 32px;overflow: hidden;">
  16.                 <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>
  17.                 <span class="span-l font" style="float: left;margin: 0px 0px 0px 3px;">物体</span>
  18.                 <span class="span-r point" style="float: right;width: 12px;height: 12px;background-color: #18EB20;border-radius: 50%;margin: 10px 5px 10px 0px;"></span>
  19.             </div>
  20.             <div class="s2" style="margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;">
  21.                 <span class="span-l font1" style="float: left;margin: 0px 10px 0px 10px;">数值</span>
  22.                 <span class="span-l font2" style="float: left;width: 70px;background-color: #2480E3;">0.14MPa</span>
  23.             </div>
  24.             <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>
  25.         </div>`
  26.     $('#div3d').append($(sign));
  27. }
  28. create_html();

  29. // 天生一个新面板
  30. function create_element() {
  31. var srcElem = document.getElementById('board');
  32. var newElem = srcElem.cloneNode(true);
  33.     newElem.style.display = "block";
  34.     app.domElement.insertBefore(newElem, srcElem);
  35. return newElem;
  36. }

  37. // 物体顶界面
  38. var ui = null;
  39. function test_create_ui() {
  40.     ui = app.create({
  41.         type: 'UIAnchor',
  42.         parent: app.query('car02')[0],
  43.         element: create_element(),
  44.         localPosition: [0, 2, 0],
  45.         pivot: [0.5, 1] // [0,0]即以界面左上角定位,[1,1]即以界面右下角停止定位
  46. });
  47. }

  48. // 位置界面
  49. var ui2 = null;
  50. function test_create_ui_at_point() {
  51.     ui2 = app.create({
  52.         type: 'UIAnchor',
  53.         element: create_element(),
  54.         position: [0, 1, 0]
  55. });
  56. }

  57. // 删除界面
  58. function test_destroy_ui() {
  59. if (ui) {
  60.         ui.destroy();
  61.         ui = null;
  62. }
  63. if (ui2) {
  64.         ui2.destroy();
  65.         ui2 = null;
  66. }
  67. }
复制代码


THING.widget 是一个支持静态数据绑定的轻量级界面库。可经过界面库中的 Panel 组件建立一个面板,并可向该面板中增加文本、数字、单选框、复选框等其他组件。ThingJS支持很多面板结果,在此我就不逐一罗列了,大师感爱好可以自己试一下~

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

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


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则