# glodon-bimface-vue3

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

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

**[BIMFACE官网](https://bimface.com)**

## 使用方式

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

```
npm install glodon-bimface-vue3 --save
```

2. 在需要引入BIMFACE的VUE页面或组件中引入glodon-bimface-vue3:
   
```
import {BimfaceComponent, Glodon, onBimfaceModelLoaded} from 'glodon-bimface-vue3'
```
+ ```BimfaceComponent```是VUE组件，引入后可在模板中使用；

+ ```Glodon```是BIMFACE提供的各类接口的根级命名空间，可参考[BIMFACE文档中心](https://bimface.com/docs-center)了解如何进行BIMFACE二次开发；

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

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

```
<script setup>
import { BimfaceComponent, Glodon, onBimfaceModelLoaded } from 'glodon-bimface-vue3';
import { ref } from 'vue';

onBimfaceModelLoaded(({app, viewer}) => {
  console.log('Bimface Model Loaded', app, viewer);
})

const viewToken = ref('');

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

getViewToken().then((value) => viewToken.value = value);

</script>

<template>
  <BimfaceComponent style="height: 100vh;" :view-token="viewToken" />
</template>
```