vue 中使用 bimface详情

 更新时间:2021-12-31 07:23:32   作者:佚名   我要评论(0)

目录1. 安装 vue 脚手架2. 创建项目3. 引入 bimface 文件3.1 运行项目
3.2 引入 bimface 文件
4. 实现页面渲染4.1 修改 html
4.2 修改 CS

整个过程分为如下几个步骤:

  • 1、安装 vue 脚手架
  • 2、创建项目
  • 3、引入 bimface 响应的文件
  • 4、修改 App.vue 文件,实现页面渲染

1. 安装 vue 脚手架

这里还是使用 Vue CLI

通过如下命令,全局安装 vue 脚手架工具

npm install -g @vue/cli


安装好之后,可以通过安装 nrm ,来切换镜像源,也可以直接进行下一步

2. 创建项目

找一个合适的目录,打开 cmd 或者 powshell,键入如下命令,创建名为 bimface-demo 的项目

 vue create bimface-demo


接下来,就是一系列选择了,通过截图的方式演示

通过上下箭头选择 Manually select features ,表示不适用默认配置,而是要自己配置 vue 项目,然后敲击回车

下面使用默认选择即可,然后敲击回车

下面选择 vue2 版本,然后回车

?下面选择代码检查工具 Eslint 的配置,通过上下箭头选择第3项,然后回车(后面禁用 ESlint 代码检查,如果不是专业前端,就不用配置这个了)

?下面选择第1项目,表示保存代码时,会对代码进行检查(因为后面我们会禁用 ESlint,所以这里无所谓了),然后回车

?下面选择使用默认配置(使用单独的配置文件,而不是将所有配置都写到一个文件中),然后回车

?下面询问,是否将上面的选择保存为模板,下次创建 vue 项目时可以直接使用次模板,我们这里输入 n,然后回车,等待创建项目完成

?经过一段时间等待,看到大概如下的界面,就证明项目创建成功了

3. 引入 bimface 文件

3.1 运行项目

首先运行一下项目,看看项目创建的是否成功

使用 vs cde(建议使用 vs code,而不是 webstorm 等) 打开刚刚创建的项目 bimface-demo

打开方式是,在 vs cde 的菜单栏,选择文件->打开文件夹,然后选择? bimface-demo 文件夹,然后点击 选择文件夹 即可

打开之后,在编辑器左侧“资源管理器”中,右键单击空白处,选择“在继承终端中打开”,或者使用快捷键 ctrl+`(就是 TAB 键上面的那个键),也可以在编辑器中打开终端,这是一个类似于 cmd 的命令行工具,我们可以在这里键入一些命令,而不用专门开启 cmd 或者 Powshell

?在终端中键入如下命令,然后回车,启动服务

npm run serve
 

当出现如下界面,表示启动成功

?此时在,浏览器中,输入上面标红的地址,出现如下界面,就万事大吉了

3.2 引入 bimface 文件

上面都是一些准备工作,下面开始真正的编写代码

因为 广联达 没有提供 bimface 的相关包,如 BimfaceSDKLoader,所以无法通过 npm 的方式在 vue 项目中安装? BimfaceSDKLoader,所以只能通过传统方式引入了

在项目目录中,找到 public 目录中的 index.html,打开

demo 中引入的几个 css 和 js 文件,在这里引入,别忘了保存文件

4. 实现页面渲染

首先在项目根目录下,找到 .eslintrc.js 文件,打开,将标红的文件注释,目的是取消 ESLint 对代码的检查,减少很多麻烦

?然后在项目根目录的 src 目录下找到 App.vue 文件,打开,在这个页面中编写代码,渲染 bimface 模型

4.1 修改 html

将 demo 中的项目代码,复制到 vue 文件中的 template 模板中

<template>
  <div id="app">
    <section class="wrap">
      <section class="viewer-box">
        <div class="viewer-2d" id="viewer2d"></div>
        <div class="viewer-3d" id="viewer3d"></div>
      </section>
    </section>
  </div>
</template>


4.2 修改 CSS

将文件中 style 标签中的代码全部删除

4.3 修改 JS

demo 中的 js 代码,修改后拷贝到 script 标签中

加入 data 函数,存储组件中需要的数据

?添加 mounted 方法,将如下代码加进来

注意在合适的位置添加 this 关键字,用以表示当前组件

 mounted() {
    let options = new BimfaceSDKLoaderConfig();
    options.viewToken = this.viewToken;
    BimfaceSDKLoader.load(options, this.successCallback, this.failureCallback);
  },


methods 中添加两个自定义方法 successCallback failureCallback

注意:方法开始的位置,声明 that 变量用于指代 this,因为在此函数中,某些情况下, this 不再指代当前 vue 组件

methods:{
     successCallback(viewMetaData) {
       let that=this
      // 获取DOM元素
      let dom3d = document.getElementById('viewer3d');
      // 配置参数
      let config = new Glodon.Bimface.Application.WebApplication3DConfig();
      config.domElement = dom3d;
      config.enableViewhouse = false;
      //取消工具条
      config.Toolbars = [];
      // 创建viewer3D对象
      let app = new Glodon.Bimface.Application.WebApplication3D(config);
      // 添加模型
      app.addView(that.viewToken);
      let viewer3D = app.getViewer();
 
      //模型点击监听事件
      app.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.MouseClicked, function (objectData) {
        componentId = objectData.objectId;
        //根据模型构件ID获取对应图纸的构件ID
        that.viewerDrawing.toDrawingId(that.componentId, getElementId);
        // 定义获取图纸对应图元ID的回调函数
        function getElementId(elementId) {
          if (elementId) {
            //如果当前图纸有对应的模型构件ID,就缩放到对应位置
            that.viewerDrawing.zoomToObject(elementId);
            that.viewerDrawing.update();
          } else {
            //如果当前图纸没有对应的模型构件ID,需进一步判断是否有包含该构件的图纸
            viewer3D.getDrawingListbyId(that.fileId, that.componentId, getDrawing);
            function getDrawing(data) {
              if (data.length) {
                // 取第一张图纸进行二三维联动
                let drawingId = data[0].viewInfo.id;
                that.viewerDrawing.destroy();
                that.viewerDrawing.load(viewToken, drawingId)
              }
            }
          }
        }
      }
      )
 
      // 监听添加view完成的事件
      app.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded, function () {
        // 渲染3D模型
        app.render();
        //自适应屏幕大小
        window.onresize = function () {
          viewer3D.resize(document.documentElement.clientWidth, document.documentElement.clientHeight - 40)
        }
        //隐藏右上角viewhouse
        //viewer3D.hideViewHouse();
        let options2d = new BimfaceSDKLoaderConfig();
        options2d.viewToken = that.viewToken;
        options2d.viewType = BimfaceViewTypeOption.DrawingView;
        BimfaceSDKLoader.load(options2d, successCallback2d, failureCallback2d);
        function successCallback2d(viewMetaData) {
          let dom2d = document.getElementById('viewer2d');
          let config2d = new Glodon.Bimface.Viewer.ViewerDrawingConfig();
          config2d.domElement = dom2d;
          //添加图纸
          that.viewerDrawing = new Glodon.Bimface.Viewer.ViewerDrawing(config2d);
          let drawingUrl = viewMetaData.drawingUrl;
          //如果是单模型的话,只需要传图纸id
          let _id = 582803;
          that.viewerDrawing.load(that.viewToken, _id);
 
          //如果是集成模型的话,需要传图纸id和单模型的fileid
          //   let _id =1287057;
          //   let _fileid =1628186476905664;
          //   viewerDrawing.load(viewToken,_id,_fileid);
 
          // 监听图纸加载完成的事件
          that.viewerDrawing.addEventListener(Glodon.Bimface.Viewer.ViewerDrawingEvent.Loaded, zoomToElement);
 
          function zoomToElement() {
            if (that.componentId) {
              that.viewerDrawing.toDrawingId(that.componentId, function (elementId) {
                //缩放到对应位置
                that.viewerDrawing.zoomToObject(elementId);
                that.viewerDrawing.update();
                console.log(elementId);
              })
            } else {
              console.log("!componentId");
            }
          }
 
          that.viewerDrawing.addEventListener(Glodon.Bimface.Viewer.ViewerDrawingEvent.SelectionChanged, function (objectData) {
            if (objectData.length > 0) {
              //根据图纸点击的构件ID获取对应的模型构件ID
              let componentId_2 = that.viewerDrawing.toModelId(objectData[0]);
              viewer3D.clearIsolation();
              //定位到该构件
              viewer3D.setSelectedComponentsById([componentId_2]);
              //是否存在构件
              let isExist = viewer3D.getViewer().getComponentInfoByUserId(componentId_2);
              if (isExist) {
                viewer3D.zoomToSelectedComponents();
              } else {
                viewer3D.render();
              }
            }
          })
        }
        function failureCallback2d(error) {
          console.log(error);
        }
      })
    },
    failureCallback(error) {
      console.log(error);
    }
  }

到此这篇关于vue 中使用 bimface详情的文章就介绍到这了,更多相关vue 中使用 bimface内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue 中使用 bimface详情

    vue 中使用 bimface详情

    目录1. 安装 vue 脚手架2. 创建项目3. 引入 bimface 文件3.1 运行项目 3.2 引入 bimface 文件 4. 实现页面渲染4.1 修改 html 4.2 修改 CS
    2021-12-31
  • 关于SpringBoot使用@Async的总结

    关于SpringBoot使用@Async的总结

    目录SpringBoot使用@Async总结如下方式会使@Async失效SpringBoot实现异步(Async)接口1. 启动类引入@EnableAsync注解2. 建立异步任务类3. 建立
    2021-12-28
  • 强制去除Unity自动添加的Android隐私权限

    强制去除Unity自动添加的Android隐私权限

    提审Google Play会遇到隐私权限的问题,最好把非必要隐私权限清理干净。GF框架DebugComponent组件中涉及Input.location API调用,Unity打包时
    2021-12-28
  • JavaScript实现语音排队叫号系统

    JavaScript实现语音排队叫号系统

    目录介绍主要功能效果展示关键代码介绍 语音排队叫号系统广泛用于银行,餐饮,医院等场景。本系统采用Layui框架完成,前端体验不错,基于角色
    2021-12-28
  • vue+elementUI实现内嵌table的方法示例

    vue+elementUI实现内嵌table的方法示例

    在大四实习工作中碰到一个比较特别的需求,要求在一个 table 表格中点击一条数据的编号,在该条数据下方出现一个新的 table 表格。这个需求
    2021-12-28
  • idea中lombok的用法

    idea中lombok的用法

    IntelliJ IDEA是一款非常优秀的集成开发工具,功能强大,而且插件众多。lombok是开源的代码生成库,是一款非常实用的小工具,我们在编辑实体
    2021-12-28
  • 微信小程序虚拟列表的应用实例

    微信小程序虚拟列表的应用实例

    目录前言什么是虚拟列表?demo效果准备工作屏高&盒子高度优化总结前言 股票热门榜单有4000多条,渲染到页面上在盘中时还得实时更新,如果采用
    2021-12-28
  • centos7修改网卡后无法上网问题解决过程

    centos7修改网卡后无法上网问题解决过程

    ping www.baidu.com未知的域名 修改主机ip地址 右键属性 选属性 这个选项原来是自动获取的,可能会在后续发生改变,因此选固定的ip。这个i
    2021-12-28
  • Python字符串的拆分与连接详解

    Python字符串的拆分与连接详解

    目录拆分字符串无参数拆分指定分隔符使用 Maxsplit 限制拆分连接和连接字符串与+运算符连接在 Python 中从列表到字符串 .join()生活中几乎没
    2021-12-28
  • python不等于运算符的具体使用

    python不等于运算符的具体使用

    Python not equal operator returns True if two variables are of same type and have different values, if the values are same then it
    2021-12-28

最新评论