bim简单应用

bim基本展示

参考链接：示例demo - 广联达BIMFACE开源代码示例赋能BIM二次开发
1.引入bimface

// index.html 
<!-- 引用BIMFACE的JavaScript显示组件库 -->
<script src="https://static.bimface.com/api/BimfaceSDKLoader/BimfaceSDKLoader@latest-release.js" charset="utf-8"></script>

2.删除多余的代码，实现bim基本展示

<template>
  <div class="main">
    <!-- 定义DOM元素，用于在该DOM元素中显示模型或图纸 -->
    <div class="model" id="domId"></div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from "vue";

let viewer3D;
let app;
let viewToken = "075eac6fc10e4914a53782cc3ccce4fc";

onMounted(() => {
  // 初始化显示组件
  let options = new BimfaceSDKLoaderConfig();
  options.viewToken = viewToken;
  BimfaceSDKLoader.load(options, successCallback, failureCallback);
});

const successCallback = (viewMetaData) => {
  if (viewMetaData.viewType == "3DView") {
    // ======== 判断是否为3D模型 ========
    // 获取DOM元素
    let dom4Show = document.getElementById("domId");
    let webAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig();
    webAppConfig.domElement = dom4Show;
    // 设置全局单位
    webAppConfig.globalUnit = Glodon.Bimface.Common.Units.LengthUnits.Millimeter;
    // 创建WebApplication
    app = new Glodon.Bimface.Application.WebApplication3D(webAppConfig);
    // 添加待显示的模型
    app.addView(viewToken);
    // 从WebApplication获取viewer3D对象
    viewer3D = app.getViewer();
    viewer3D.render();
  }
};

const failureCallback = (error) => {
  console.log(error);
};
</script>

<style lang="scss" src="">
.main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 800px;
  width: 100%;
}

.model {
  flex: 1;
}
</style>

这样，最简单的模型就展示出来了。

不过有个问题，目前viewToken用的是官网的示例，24小时失效。后续要动态获取viewToken