glodon-bimface-vue

BIMFACE提供的开箱即用的VUE组件，便于开发者快速将BIMFACE引入到VUE项目中。

注意：此组件适用于Vue2版本的项目，如需在Vue3中使用，请安装glodon-bimface-vue3

BIMFACE官网

使用方式

1. 在项目中安装glodon-bimface-vue:

npm install glodon-bimface-vue --save

2. 在需要引入BIMFACE的VUE页面或组件中引入glodon-bimface-vue:

import {BimfaceComponent, Glodon, onBimfaceModelLoaded} from 'glodon-bimface-vue'

• BimfaceComponent是VUE组件，可注册到components中，在template模板中使用；

• Glodon是BIMFACE提供的各类接口的根级命名空间，可参考BIMFACE文档中心了解如何进行BIMFACE二次开发；

• onBimfaceModelLoaded用于注册模型加载完成事件，模型加载后，开发者可通过加载完成事件得到BIMFACE的app、viewer实例对象，进行二次开发；

3. 基本的使用方式参考：

<template>
  <div id="app">
    <BimfaceComponent style="height: 100vh;" :viewToken="viewToken" />
  </div>
</template>

<script>
import {BimfaceComponent, Glodon, onBimfaceModelLoaded} from 'glodon-bimface-vue'

export default {
  name: 'App',
  components: {
    BimfaceComponent
  },
  data() {
    return {
      viewToken: ''
    }
  },
  created() {
    onBimfaceModelLoaded(({app, viewer}) => {
      console.log('Bimface Model Loaded', app, viewer);
    })

    // getViewToken为异步获取模型viewToken的方法，由开发者基于后端API自行封装，此处仅为模拟异步接口返回viewToken值的示例
    const getViewToken = () => new Promise((resolve) => setTimeout(() => resolve('68063517918c46269445b255fb429e3c'), 3000));

    getViewToken().then((value) => this.viewToken = value);
  }
}
</script>