预览GeoBIM文件

项目需求：预览后缀名为GeoBIM的文件

1、安装相关依赖

npm i @xbim/viewer -S

2、在Vue3中的使用

<template>
  <canvas id="bim-canvas" style="width: 100%; height: 100%"></canvas>
</template>

<script lang="ts" setup>
import {
    
     watch, nextTick } from 'vue';
import {
    
     Grid, NavigationCube, Viewer, ViewType } from '@xbim/viewer';

const props = defineProps({
    
    
  bimUrl: {
    
    
    type: String,
    default: () => '',
  },
});
let viewer;
const setViewerOptions = () => {
    
    
  viewer.background = [26, 51, 76, 255];
  viewer.highlightingColour = [0, 0, 225, 200];
  viewer.brightness = -0.5;
  viewer.hoverPickColour = [0, 0, 225, 200];
};
const setViewerPlugin = () => {
    
    
  const cube = new NavigationCube();
  cube.ratio = 0.05;
  // eslint-disable-next-line no-multi-assign
  cube.passiveAlpha = cube.activeAlpha = 0.85;
  viewer.addPlugin(new Grid());
  viewer.addPlugin(cube);
};
const token = localStorage.getItem('TOKEN') as string;
const headers = {
    
    
  Authorization: `Bearer ${
      
      JSON.parse(token).access_token}`,
};
const loadGeoBim = (bimUrl) => {
    
    
  const check = Viewer.check();
  if (check.noErrors) {
    
    
    nextTick(() => {
    
    
      viewer = new Viewer('bim-canvas');
      setViewerOptions();
      setViewerPlugin();
      viewer.on('loaded', function () {
    
    
        viewer.show(ViewType.DEFAULT, undefined, undefined, false);
        viewer.start();
      });
		// bimUrl: 后端接口路径： http://xxxx.geobim
      fetch(bimUrl, {
    
     headers })
        .then((responce) => responce.arrayBuffer())
        .then((arrayBuffer) => {
    
    
          const blob = new Blob([arrayBuffer], {
    
     type: 'application/octet-stream' });
          // 可加载流Blob、URL
          viewer.load(blob);
        });
    });
  }
};
watch(
  () => props.bimUrl,
  (bimUrl) => {
    
    
    loadGeoBim(bimUrl);
  },
  {
    
    
    immediate: true,
    deep: true,
  },
);
</script>