4dkankan_bim/src/pages/Bim.vue

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

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

// 加载成功回调函数
const successCallback = viewMetaData => {
    let dom4Show = document.getElementById('domId')
    // 设置WebApplication3D的配置项
    let webAppConfig = new Glodon.Bimface.Application.WebApplicationRfaConfig()
    webAppConfig.domElement = dom4Show
    webAppConfig.EnableFamilyList = false
    // 设置模型爆炸配置项
    webAppConfig.enableExplosion = true
    // 创建WebApplication3D，用以显示模型
    app = new Glodon.Bimface.Application.WebApplicationRfa(webAppConfig)
    app.addView(viewToken)
    viewer3D = app.getViewer()
    // 监听添加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)
    })

    // viewer3D.addEventListener(Glodon.Bimface.Viewer.ViewerDrawingEvent.MouseClicked, function (objectdata) {
    //     // 调用viewerDrawing对象的Method，可以继续扩展功能
    //     alert('objectId : ' + JSON.stringify(objectdata.objectId) + '\n' + 'worldPosition : ' + JSON.stringify(objectdata.worldPosition))
    // })
}

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

onMounted(() => {
    let loaderConfig = new BimfaceSDKLoaderConfig()
    loaderConfig.viewToken = viewToken
    BimfaceSDKLoader.load(loaderConfig, successCallback, failureCallback)
})
</script>
<style lang="scss" scoped>
#domId {
    width: 100%;
    height: 100%;
}
</style>