BIMserver入门笔记 - 02登录及模型展示

1,519 7
BIM BIMserver
  1. 准备什么
  2. 需要什么
  3. 万里长征第一步
    1. 设计布局
    2. 变量配置
    3. 登录
    4. 模型加载及展示
    5. 效果展示

BIMserver登录及模型展示：
BIMserver资料较少，没有成熟的接口文档，没有成熟的示例程序，但是BIMserver为我们提供了一个运维程序、示例数据，在Github中的opensourceBIM这个开源组织，给开发者提供了不少源码级的学习内容。从运维程序中我们可以梳理出BIMserver的执行过程，方便我们二次开发。

  1. BIMserver入门笔记 - 01环境搭建、数据导入及预览

  2. BIMserver入门笔记 - 02登录及模型展示

从上一节我们了解了BIMserver的安装配置和运维的使用，但是在项目中我们不可能去直接用BIMserver的运行界面，需要我根据自己的项目需求来自定义自己的BIM展示界面和功能，所以我们就要从开发者角度去审视BIMserver。

准备什么

既然是开发者，前端就至少要懂前端的，后端至少要懂后端的，最好两者都熟悉。准备工作除了能搭建起BIMserver环境，还要有以下的几个特点（建议）：

  • 一件趁手的兵器——IDE（前端就WebStorm咯，涉及到后台就IDEA咯）
  • 一个性能不错的本子——内存和CPU性能要好，关键还要有不错的显卡

需要什么

  • 一个敢于钻研的劲头

  • 一个不服输、有韧性的心

新兴的技术或者前沿的技术，必要要耐得住性子

除了精神上的鼓舞，我还要掌握一些查资料的技能，特别是在对BIMserver二次开发中，资料少之又少，整个腾讯就两个群（一个群人数不超过一只手的手指头数）。另外官方也没有提供Step by step和接口文档，示例代码也是少的可怜，Stack Overflow、CSDN和博客园中资料也是凤毛麟角，所以二次开发的参考资料还是去查看官方的接口源码，比如最常用的接口源码。

万里长征第一步

万事开头难，先起个Hellobim吧！

设计布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="maincontainer">
  <div id="topsection">
    <h1>Hellobim</h1>
  </div>
  <div id="contentwrapper">
    <div id="colmid">
      <div id="colright">
        <div id="col1wrap">
          <div id="col1pad">
            <div id="viewerContainer">
            </div>
          </div>
        </div>
        <div id="treeContainer" class="bimsurfer-static-tree">
        </div>
        <div id="dataContainer" class="bimsurfer-metadata">
        </div>
      </div>
    </div>
  </div>
</div>

变量配置

由于JavaScript代码比较多，所以拆分成了三部分，一个是变量配置模块，一个是登录模块，一个是模型加载展示。

1
2
3
4
5
6
var projectName = 'test1'; // address地址下的BIMserver服务中必须有test1项目，而且还要有模型
var address = "http://192.168.1.116:8082"; // 这三个是在安装BIMserver时配置的地址、账户和密码
var account = "admin@163.com";
var password = "1234567890";
var token, poid, lastRevisionId; // 这三个是在模型加载时需要用到的
var metadata; // 这是右侧元数据

登录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// 登录代码
document.addEventListener("DOMContentLoaded", function (event) {
  function loadFromBimserver(address, username, password, target) {
    var client = new BimServerClient(address);
    client.init(function () {
      client.login(username, password, function () {
        // 根据项目名称获取该项目的模型场景
        client.call("ServiceInterface", "getAllProjects", {
          onlyTopLevel: true,
          onlyActive: true
        }, function (projects) {
          var totalFound = 0;
          projects.forEach(function (project) {
            if (project.name === projectName) {
              token = client.token;
              poid = project.oid;
              lastRevisionId = project.lastRevisionId;
            }
          });
        });
      }, function (error) {
        console.error(error);
      });
    });
  }

  try {
    loadFromBimserver(address, account, password);
  } catch (e) {
    console.log(e);
  }
});

模型加载及展示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
// 加载模型并展示
require(["bimsurfer/src/BimSurfer",
    "bimsurfer/src/BimServerModelLoader",
    "bimsurfer/src/StaticTreeRenderer",
    "bimsurfer/src/MetaDataRenderer",
    "bimsurfer/lib/domReady!"],
  function (BimSurfer, BimServerModelLoader, StaticTreeRenderer, MetaDataRenderer) {

    function processBimSurferModel(bimSurferModel) {

      bimSurferModel.getTree().then(function (tree) {

        var domtree = new StaticTreeRenderer({
          domNode: 'treeContainer'
        });
        domtree.addModel({name: "", id: lastRevisionId, tree: tree});
        domtree.build();
        metadata = new MetaDataRenderer({
          domNode: 'dataContainer'
        });

        metadata.addModel({name: "", id: lastRevisionId, model: bimSurferModel});

        bimSurfer.on("selection-changed", function (selected) {
          domtree.setSelected(selected, domtree.SELECT_EXCLUSIVE);
          metadata.setSelected(selected);
        });

        domtree.on("click", function (oid, selected) {
          if (selected.length) {
            bimSurfer.viewFit({
              ids: selected,
              animate: true
            });
          }
          bimSurfer.setSelection({
            ids: selected,
            clear: true,
            selected: true
          });
        });

      });
    }

    var bimSurfer = new BimSurfer({
      domNode: "viewerContainer"
    });
    window.bimSurfer = bimSurfer;

    var bimServerClient = new BimServerClient(address, null);
    bimServerClient.init(function () {

      bimServerClient.setToken(token, function () {
        var modelLoader = new BimServerModelLoader(bimServerClient, bimSurfer);

        var models = {}; // roid -> Model

        var nrProjects;

        function loadModels(models, totalBounds) {
          var center = [
            (totalBounds.min[0] + totalBounds.max[0]) / 2,
            (totalBounds.min[1] + totalBounds.max[1]) / 2,
            (totalBounds.min[2] + totalBounds.max[2]) / 2
          ];

          var globalTransformationMatrix = [
            1, 0, 0, 0,
            0, 1, 0, 0,
            0, 0, 1, 0,
            -center[0], -center[1], -center[2], 1
          ];
          for (var roid in models) {
            var model = models[roid];
            modelLoader.setGlobalTransformationMatrix(globalTransformationMatrix);
            modelLoader.loadFullModel(model).then(function (bimSurferModel) {
              processBimSurferModel(bimSurferModel);
              //填充下拉框
              getModelOidAndName(bimSurferModel);
            });
          }
        }

        function getModelOidAndName(thisModel) {
          var modelObj = thisModel.apiModel.objects;
          Object.keys(modelObj).forEach(function (key) {
            if (modelObj[key].object.hasChildren === undefined) {
              var option = document.createElement("option");
              $(option).val(key);
              if (modelObj[key].object.Name === undefined || modelObj[key].object.Name === "") {
                $(option).text(key);
              } else {
                $(option).text(modelObj[key].object.Name);
              }
              $('#select').append(option);
            }
          });
        }

        bimServerClient.call("ServiceInterface", "getAllRelatedProjects", {poid: poid}, function (projects) {
          nrProjects = projects.length;
          var totalBounds = {
            min: [Number.MAX_VALUE, Number.MAX_VALUE, Number.MAX_VALUE],
            max: [-Number.MAX_VALUE, -Number.MAX_VALUE, -Number.MAX_VALUE]
          };

          projects.forEach(function (project) {

            if (project.lastRevisionId !== -1) {
              //lastRevisionId
              bimServerClient.getModel(project.oid, project.lastRevisionId, project.schema, false, function (model) {
                models[project.lastRevisionId] = model;

                bimServerClient.call("ServiceInterface", "getModelMinBounds", {roid: project.lastRevisionId}, function (minBounds) {
                  bimServerClient.call("ServiceInterface", "getModelMaxBounds", {roid: project.lastRevisionId}, function (maxBounds) {
                    if (minBounds.x < totalBounds.min[0]) {
                      totalBounds.min[0] = minBounds.x;
                    }
                    if (minBounds.y < totalBounds.min[1]) {
                      totalBounds.min[1] = minBounds.y;
                    }
                    if (minBounds.z < totalBounds.min[2]) {
                      totalBounds.min[2] = minBounds.z;
                    }
                    if (maxBounds.x > totalBounds.max[0]) {
                      totalBounds.max[0] = maxBounds.x;
                    }
                    if (maxBounds.y > totalBounds.max[1]) {
                      totalBounds.max[1] = maxBounds.y;
                    }
                    if (maxBounds.z > totalBounds.max[2]) {
                      totalBounds.max[2] = maxBounds.z;
                    }
                    nrProjects--;
                    if (nrProjects === 0) {
                      loadModels(models, totalBounds);
                    }
                  });
                });
              });
            } else {
              nrProjects--;
              if (nrProjects === 0) {
                loadModels(models, totalBounds);
              }
            }
          });
        });
      });
    });
});

效果展示

在index.html中右击，选择 Run 'index.html'或者Ctrl + Shift + F10启动页面，效果如图：

点击任意部件，部件高亮并且可以查看部件的信息。

界面丑，待优化，至少模型加载并展示了嘛

能力有限，如有错误或疑问请在评论区指出，谢谢。


关注公众号

当前网速较慢或者你使用的浏览器不支持博客特定功能，请尝试刷新或换用Chrome、Firefox等现代浏览器