请选择 进入手机版 | 继续访问电脑版
分享
查看: 19193|回复: 0

[分享] 简单好用封装threejs库3D可视化试一下?

[复制链接]

简单好用封装threejs库3D可视化试一下?

发表于 2019-12-20 17:50:55 来自 分享 阅读模式 倒序浏览
zzv_icon19193 zzr_icon0 查看全部

3D可视化应用开发对每个企业来说都是大工程,需要投入大量的人力物力财力才能做好这项工程,但其实可是化繁为简,不需要大费周章,具体来说,thingjs3D可视化开发平台,基于webgl3D绘制标准,使用最热门的Javascript语言,封装threejs库,前端工程师可实现在线开发,可视化场景通过拖拽和简单写一些代码,对接数据源,项目部署之后就可以运行在您的服务器了~真是简单好用呢。

简单好用封装threejs库3D可视化试一下?
thingjs-面向物联网的3D可视化开发平台
  1. /**
  2. * 说明:将场景中对象展示到界面上
  3. * 操作:点击界面上选择框
  4. * 说明:场景初始化完成后,子物体的显隐、样式默认继承父物体的显隐状态、样式
  5. * 通过 obj.inheritVisible = true/false 控制子物体是否继承父物体显隐状态
  6. */
  7. // 引入jquery.easyui插件
  8. THING.Utils.dynamicLoad(['lib/jquery.easyui.min.js', 'lib/default/easyui.css'], function() {
  9. var panel =
  10. `<div class="easyui-panel" style="opacity: 0; padding:5px; width: 300px;height: auto;margin-top: 10px;margin-left: 10px; position: absolute; top: 0; left: 0; z-index: 1;background-color: white">
  11. <ul id="objectTree" class="easyui-tree"></ul>
  12. </div>`
  13. $('#div2d').append($(panel));
  14. })
  15. var app = new THING.App({
  16. url: 'https://www.thingjs.com/static/models/storehouse'
  17. });
  18. // 这里使用了jquery.easyui的tree插件
  19. app.on('load', function (ev) {
  20. var buildings = app.query('.Building');
  21. buildings.forEach(function (building) {
  22. building.floors.forEach(function (floor) {
  23. // 设置楼层不受建筑显隐控制
  24. // floor.inheritVisible = false
  25. })
  26. });
  27. $('#objectTree').parent().css('opacity', 1);
  28. $('#objectTree').tree({
  29. data: getRootData(ev.campus),
  30. checkbox: true,
  31. cascadeCheck: false,
  32. onCheck: function (node, checked) {
  33. app.query('#' + node.id).visible = checked;
  34. }
  35. })
  36. });
  37. // 根节点信息由 建筑 和 室外物体 组成
  38. function getRootData(campus) {
  39. var data = [];
  40. campus.buildings.forEach(function (building) {
  41. data.push(getBuildingData(building));
  42. });
  43. campus.things.forEach(function (thing) {
  44. data.push(getThingData(thing));
  45. });
  46. return data;
  47. }
  48. // 收集 建筑 信息
  49. function getBuildingData(building) {
  50. var data = {
  51. id: building.id,
  52. checked: true,
  53. state: 'closed',
  54. text: building.type + ' (' + building.id + ')'
  55. };
  56. data["children"] = [];
  57. building.floors.forEach(function (floor) {
  58. data["children"].push(getFloorData(floor));
  59. });
  60. return data;
  61. }
  62. // 收集 楼层 信息
  63. function getFloorData(floor) {
  64. var data = {
  65. id: floor.id,
  66. checked: true,
  67. state: 'closed',
  68. text: floor.type + ' (level:' + floor.levelNumber + ')'
  69. };
  70. data["children"] = [];
  71. floor.things.forEach(function (thing) {
  72. data["children"].push(getThingData(thing));
  73. });
  74. return data;
  75. }
  76. // 收集 物 信息
  77. function getThingData(thing) {
  78. return {
  79. id: thing.id,
  80. checked: true,
  81. text: thing.type + ' (' + thing.name + ')'
  82. };
  83. }
复制代码

简单好用threejs库3D可视化平台thingjs,前端工程师会js就可以的,试一下你就知道如何做啦~

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

本版积分规则

130700ppkpl8x3t7tt1b1t