vue 中使用 bimface详情

首先，需要明确的是，要在Vue中使用Bimface详情，需要引入BimFace的JavaScript SDK，并按照BimFace提供的文档设置好BimFace Viewer所需的DOM容器以及相关参数。接下来，我们将详细讲解该过程。

步骤一：引入BimFace SDK

由于BimFace SDK的体积较大，我们一般会将其放在CDN上，通过Vue的component中增加script的方式引入。以https://api.bimface.com/viewer/v3.0/bimface.js为例，可以在Vue中的component中添加如下代码：

<template>
  <div id="viewerContainer" style="height: 600px;"></div>
</template>

<script>
export default {
  mounted () {
    const script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = 'https://api.bimface.com/viewer/v3.0/bimface.js'
    script.async = true
    script.onload = this.onLoad
    document.body.appendChild(script)
  },
  methods: {
    onLoad () {
      // 这里可以进行后续的 SDK 配置和 Bimface Viewer 的创建
      this.initViewer()
    },
    initViewer () {
      // 在这里设置 Bimface Viewer 的相关参数和 DOM 容器
      const viewerContainer = document.getElementById('viewerContainer')
      // ...
    }
  }
}
</script>

步骤二：配置BimFace Viewer

配置Viewer需要设置以下三个参数：

1. DOM容器，即Viewer所在的元素。在示例中我们使用的是<div id="viewerContainer" style="height: 600px;"></div>
2. Bimface 应用的appKey，即你注册Bimface开发者后会收到的appKey，这个key会在初始化Bimface SDK时使用。
3. 文件的ViewToken，即跟该模型对应的运行Token。调用BimFace的 "文件转换接口" 后，会生成一个ViewToken，可以使用这个Token来加载模型。

以下是代码示例：

initViewer () {
  // 在这里设置 Bimface Viewer 的相关参数和 DOM 容器
  const viewerContainer = document.getElementById('viewerContainer')
  const config = {
    // 初始化Bimface viewer需要的appkey
    appKey: '你的appKey',
    // runtime需要的endpoint
    endpoint: 'https://api.bimface.com',
    domElement: viewerContainer,
    // BimFace 文件的View Token
    viewToken: '你的viewToken'
  }
  window.BimfaceSDKLoader.load(config, () => {
    this.viewer3D = new window.BimfaceSDK.Viewer3D(config.domElement)
    // 在这里设置Bimface Viewer的内置控件等
  })
}

示例一：加载模型

<template>
  <div id="viewerContainer" style="height: 600px;"></div>
</template>

<script>
export default {
  mounted () {
    const script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = 'https://api.bimface.com/viewer/v3.0/bimface.js'
    script.async = true
    script.onload = this.onLoad
    document.body.appendChild(script)
  },
  methods: {
    onLoad () {
      this.initViewer()
    },
    initViewer () {
      const viewerContainer = document.getElementById('viewerContainer')
      const config = {
        appKey: '你的appKey',
        endpoint: 'https://api.bimface.com',
        domElement: viewerContainer,
        viewToken: '你的viewToken'
      }
      window.BimfaceSDKLoader.load(config, () => {
        this.viewer3D = new window.BimfaceSDK.Viewer3D(config.domElement)
        this.viewer3D.load(config.viewToken)
      })
    }
  }
}
</script>

在这个例子中，我们通过load方法加载了模型，Viewer会自动解析并渲染出我们的模型。

示例二：标记构件

<template>
  <div id="viewerContainer" style="height: 600px;"></div>
</template>

<script>
export default {
  mounted () {
    const script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = 'https://api.bimface.com/viewer/v3.0/bimface.js'
    script.async = true
    script.onload = this.onLoad
    document.body.appendChild(script)
  },
  methods: {
    onLoad () {
      this.initViewer()
    },
    initViewer () {
      const viewerContainer = document.getElementById('viewerContainer')
      const config = {
        appKey: '你的appKey',
        endpoint: 'https://api.bimface.com',
        domElement: viewerContainer,
        viewToken: '你的viewToken'
      }
      window.BimfaceSDKLoader.load(config, () => {
        this.viewer3D = new window.BimfaceSDK.Viewer3D(config.domElement)
        this.viewer3D.load(config.viewToken)
        this.viewer3D.addEventListener(
          window.BimfaceSDK.Constants.BIMFACETOOLBAR_CLICK, () => {
            this.viewer3D.getSelection(result => {
              result.forEach(item => {
                this.viewer3D.markup(item, `<h1>你标记的是${item.name}</h1>`)
              })
            })
          }
        )
      })
    }
  }
}
</script>

在这个例子中，我们引入了window.BimfaceSDK.Constants.BIMFACETOOLBAR_CLICK用于监听Viewer中的操作，例如点击了一个构件。接着，在点击构件后，我们通过this.viewer3D.getSelection(result => {} )方法来获取到所选的构件，之后使用this.viewer3D.markup(item, label)来对所选的构件标记说明。标记内容在这里我们只是简单地放了一个字符串，实际使用过程中可以放置更具体的信息。

以上就是在Vue中使用Bimface详情的完整攻略，如果还有疑问可以参考Bimface的官方文档进行查阅。