4dkankan_bim/src/pages/Bim.vue

<template>
    <div id="domId"></div>
</template>
<script setup>
import { onMounted } from 'vue'
import browser from '@/utils/browser'

let viewToken = 'c34b3bf046e140968d1d3a30bdc229f4'
// 声明Viewer及App
let app
let viewer3D
let viewAdded = false

// 加载成功回调函数
const successCallback1 = viewMetaData => {
    let dom4Show = document.getElementById('domId')
    // 设置WebApplication3D的配置项
    let webAppConfig = new Glodon.Bimface.Application.WebApplicationRfaConfig()
    webAppConfig.domElement = dom4Show
    webAppConfig.EnableFamilyList = false
    // 设置模型爆炸配置项
    webAppConfig.enableExplosion = false
    // 创建WebApplication3D，用以显示模型
    app = new Glodon.Bimface.Application.WebApplicationRfa(webAppConfig)

    viewer3D = app.getViewer()
    viewer3D.loadModel({ viewMetaData })
    // 监听添加view完成的事件
    viewer3D.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded, function () {
        //自适应屏幕大小
        window.onresize = function () {
            viewer3D.resize(document.documentElement.clientWidth, document.documentElement.clientHeight /* - 40*/)
        }
        viewAdded = true
        // 渲染3D模型
        viewer3D.render()

        window.loaded.resolve(viewer3D)
    })
}

const successCallback2 = viewMetaData => {
    var view = document.getElementById('domId')
    var config = new Glodon.Bimface.Application.WebApplicationRfaConfig()
    config.domElement = view
    config.EnableFamilyList = false
    // 设置模型爆炸配置项
    config.enableExplosion = false
    var eventManager = Glodon.Bimface.Application.WebApplication3DEvent
    app = new Glodon.Bimface.Application.WebApplicationRfa(config)
    viewer3D = app.getViewer()
    viewer3D.loadModel({ viewMetaData })
    viewer3D.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded, function () {
        //自适应屏幕大小
        window.onresize = function () {
            viewer3D.resize(document.documentElement.clientWidth, document.documentElement.clientHeight /* - 40*/)
        }
        viewAdded = true
        // 渲染3D模型
        viewer3D.render()

        window.loaded.resolve(viewer3D)
    })
}

// 加载失败回调函数
const failureCallback = error => {
    console.log(error)
}

onMounted(() => {
    // let loaderConfig = new BimfaceSDKLoaderConfig()
    // loaderConfig.viewToken = viewToken
    // BimfaceSDKLoader.load(loaderConfig, successCallback1, failureCallback)
    const m = browser.valueFromUrl('m')
    let BimfaceLoaderConfig = new BimfaceSDKLoaderConfig()
    BimfaceLoaderConfig.dataEnvType = BimfaceEnvOption.Local
    BimfaceLoaderConfig.sdkPath = 'https://4dkk.4dage.com/bim/jssdk'
    BimfaceLoaderConfig.path = `${m}viewToken.json`
    BimfaceSDKLoader.load(BimfaceLoaderConfig, successCallback2, failureCallback)
})
</script>
<style lang="scss" scoped>
#domId {
    width: 100%;
    height: 100%;
}
</style>
<style lang="scss">
.bf-loading .bf-loading-gif {
    width: 80px !important;
    height: 80px !important;
    background-size: contain;
    background-repeat: no-repeat
}
.bf-toolbar.bf-toolbar-bottom{
    bottom: 40px !important;
}
</style>