glodon-bimface-react

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

BIMFACE官网

使用方式

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

npm install glodon-bimface-react --save

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

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

• BimfaceComponent是React组件，引入后可插入到jsx模板中使用；

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

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

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

import { BimfaceComponent, Glodon, onBimfaceModelLoaded } from 'glodon-bimface-react';
import { useState } from 'react';

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

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

export default function BimModel() {
  const [viewToken, setViewToken] = useState('');
  viewToken || getViewToken().then((value) => setViewToken(value));

  return (
    <>
      <div style={{ width: '100%', height: '100vh' }}>
        <BimfaceComponent viewToken={viewToken} />
      </div>
    </>
  )
}