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

thingjs-面向物联网的3D可视化开发平台

1. /**
3. * 说明：将场景中对象展示到界面上
5. * 操作：点击界面上选择框
7. * 说明：场景初始化完成后，子物体的显隐、样式默认继承父物体的显隐状态、样式
9. * 通过 obj.inheritVisible = true/false 控制子物体是否继承父物体显隐状态
11. */
13. // 引入jquery.easyui插件
15. THING.Utils.dynamicLoad(['lib/jquery.easyui.min.js', 'lib/default/easyui.css'], function() {
17. var panel =
19. `<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">
21. <ul id="objectTree" class="easyui-tree"></ul>
23. </div>`
25. $('#div2d').append($(panel));
27. })
29. var app = new THING.App({
31. url: 'https://www.thingjs.com/static/models/storehouse'
33. });
35. // 这里使用了jquery.easyui的tree插件
37. app.on('load', function (ev) {
39. var buildings = app.query('.Building');
41. buildings.forEach(function (building) {
43. building.floors.forEach(function (floor) {
45. // 设置楼层不受建筑显隐控制
47. // floor.inheritVisible = false
49. })
51. });
53. $('#objectTree').parent().css('opacity', 1);
55. $('#objectTree').tree({
57. data: getRootData(ev.campus),
59. checkbox: true,
61. cascadeCheck: false,
63. onCheck: function (node, checked) {
65. app.query('#' + node.id).visible = checked;
67. }
69. })
71. });
73. // 根节点信息由 建筑 和 室外物体 组成
75. function getRootData(campus) {
77. var data = [];
79. campus.buildings.forEach(function (building) {
81. data.push(getBuildingData(building));
83. });
85. campus.things.forEach(function (thing) {
87. data.push(getThingData(thing));
89. });
91. return data;
93. }
95. // 收集 建筑 信息
97. function getBuildingData(building) {
99. var data = {
101. id: building.id,
103. checked: true,
105. state: 'closed',
107. text: building.type + ' (' + building.id + ')'
109. };
111. data["children"] = [];
113. building.floors.forEach(function (floor) {
115. data["children"].push(getFloorData(floor));
117. });
119. return data;
121. }
123. // 收集 楼层 信息
125. function getFloorData(floor) {
127. var data = {
129. id: floor.id,
131. checked: true,
133. state: 'closed',
135. text: floor.type + ' (level:' + floor.levelNumber + ')'
137. };
139. data["children"] = [];
141. floor.things.forEach(function (thing) {
143. data["children"].push(getThingData(thing));
145. });
147. return data;
149. }
151. // 收集 物 信息
153. function getThingData(thing) {
155. return {
157. id: thing.id,
159. checked: true,
161. text: thing.type + ' (' + thing.name + ')'
163. };
165. }

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