Vue 之webpack BIMFACE（JavaScript 转 Vue） 搭建工程

转x33g5p2x  于2022-03-09 转载在 Java  
字(7.7k)|赞(0)|评价(0)|浏览(579)

1、Vue 之 BIMFACE 搭建工程

在webpack当中执行如下语句

  1. npm i bimfacesdkloader

2、原本案例的JS代码

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.   <meta name="renderer" content="webkit">
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.   <title>隐藏构件</title>
  9.   <style media="screen">
  10.     * {
  11.       margin: 0;
  12.       padding: 0
  13.     }
  15.     html,
  16.     body {
  17.       height: 100%
  18.     }
  20.     .main {
  21.       display: flex;
  22.       flex-direction: column;
  23.       overflow: hidden;
  24.       height: 100%;
  25.       width: 100%
  26.     }
  28.     .model {
  29.       flex: 1
  30.     }
  32.     .buttons {
  33.       font-size: 0;
  34.     }
  36.     .button {
  37.       margin: 5px 0 5px 5px;
  38.       width: 120px;
  39.       height: 30px;
  40.       border-radius: 3px;
  41.       border: none;
  42.       background: #32D3A6;
  43.       color: #FFFFFF;
  44.     }
  45.   </style>
  46.   <!-- 引用BIMFACE的JavaScript显示组件库 -->
  47.   <script src="https://static.bimface.com/api/BimfaceSDKLoader/BimfaceSDKLoader@latest-release.js" charset="utf-8">
  48.   </script>
  49. </head>
  51. <body>
  52.   <!-- 定义DOM元素，用于在该DOM元素中显示模型或图纸 -->
  53.   <div class='main'>
  54.     <div class='buttons'>
  55.       <button type="button" class="button" id="btnHideComponentsByObjectId"
  56.         onclick="hideComponentsById()">根据ID隐藏构件</button>
  57.       <button type="button" class="button" id="btnHideComponentsByObjectData"
  58.         onclick="hideComponentsByData()">根据条件隐藏构件</button>
  59.     </div>
  60.     <!-- 定义DOM元素，用于在该DOM元素中显示模型或图纸 -->
  61.     <div class='model' id="domId"></div>
  62.   </div>
  63.   <script type="text/javascript">
  64.     let viewer3D;
  65.     let app;
  66.     let model3D;
  67.     let viewToken = '48c4c5b367c348b08cca7a1b935226b9';
  68.     // 初始化显示组件
  69.     let options = new BimfaceSDKLoaderConfig();
  70.     options.viewToken = viewToken;
  71.     BimfaceSDKLoader.load(options, successCallback, failureCallback);
  73.     function successCallback(viewMetaData) {
  74.       if (viewMetaData.viewType == "3DView") {
  75.         // ======== 判断是否为3D模型 ========        
  76.         // 获取DOM元素
  77.         let dom4Show = document.getElementById('domId');
  78.         let webAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig();
  79.         webAppConfig.domElement = dom4Show;
  80.         // 创建WebApplication
  81.         app = new Glodon.Bimface.Application.WebApplication3D(webAppConfig);
  82.         // 添加待显示的模型
  83.         app.addView(viewToken);
  84.         // 从WebApplication获取viewer3D对象
  85.         viewer3D = app.getViewer();
  86.         // 监听添加view完成的事件
  87.         viewer3D.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded, function () {
  88.           // 调用viewer3D对象的Method，可以继续扩展功能
  89.           //自适应屏幕大小
  90.           window.onresize = function () {
  91.             viewer3D.resize(document.documentElement.clientWidth, document.documentElement.clientHeight - 40)
  92.           }
  93.           // 从viewer3D对象中获取模型对象model3D
  94.           model3D = viewer3D.getModel();
  95.           // 渲染3D模型
  96.           viewer3D.render();
  97.         });
  98.       }
  99.     }
  101.     function failureCallback(error) {
  102.       console.log(error);
  103.     }
  105.     //********************根据Id隐藏构件*********************
  106.     let isHideComponentsByIdActivated = false;
  108.     function hideComponentsById() {
  109.       if (!isHideComponentsByIdActivated) {
  110.         model3D.hideComponentsById(["307240", "267327", "307240", "259504", "264857"]);
  111. 		
  112.         viewer3D.render();
  113.         setButtonText("btnHideComponentsByObjectId", "显示构件");
  114.       } else {
  115.         //取消隐藏
  116.         model3D.showComponentsById(["307240", "267327", "307240", "259504", "264857"]);
  117.         viewer3D.render();
  118.         setButtonText("btnHideComponentsByObjectId", "根据ID隐藏构件");
  119.       }
  120.       isHideComponentsByIdActivated = !isHideComponentsByIdActivated;
  121.     }
  123.     //********************根据条件隐藏构件*********************
  124.     let isHideComponentsByDataActivated = false;
  126.     function hideComponentsByData() {
  127.       if (!isHideComponentsByDataActivated) {
  128.         //设置隐藏构件的条件
  129.         model3D.hideComponentsByObjectData([{
  130.           "levelName": "F2"
  131.         }, {
  132.           "levelName": "F1"
  133.         }, {
  134.           "levelName": "标高 5"
  135.         }]);
  136.         viewer3D.render();
  137.         setButtonText("btnHideComponentsByObjectData", "显示构件");
  138.       } else {
  139.         //取消隐藏
  140.         model3D.showComponentsByObjectData([{
  141.           "levelName": "F2"
  142.         }, {
  143.           "levelName": "F1"
  144.         }, {
  145.           "levelName": "标高 5"
  146.         }]);
  147.         viewer3D.render();
  148.         setButtonText("btnHideComponentsByObjectData", "根据条件隐藏构件");
  149.       }
  150.       isHideComponentsByDataActivated = !isHideComponentsByDataActivated;
  151.     }
  153.     // *********************** 按钮文字 ***********************
  154.     function setButtonText(btnId, text) {
  155.       let dom = document.getElementById(btnId);
  156.       if (dom != null && dom.nodeName == "BUTTON") {
  157.         dom.innerText = text;
  158.       }
  159.     }
  160.   </script>
  161. </body>

3、转换为Vue代码

（1）引入依赖

  1. import {BimfaceSDKLoader,BimfaceSDKLoaderConfig,Glodon} from 'bimfacesdkloader'

（2）mounted（将JS的代码直接复制到mounted当中）

在div上设置一下标题

  1. ref="bfContainer"

获取当中对应的div，负责到渲染BIM项目当中

4、转换后全部Vue代码（HelloWorld.vue）

  1. <template>
  2.   <div class="hello" ref="bfContainer">
  4.   </div>
  5. </template>
  7. <script>
  9. import {BimfaceSDKLoader,BimfaceSDKLoaderConfig,Glodon} from 'bimfacesdkloader'
  11. export default {
  12.   name: 'HelloWorld',
  13.   data () {
  14.     return {
  15.       msg: 'Welcome to Your Vue.js App'
  16.     }
  17.   },
  18.   mounted(){
  20.     const dom = this.$refs.bfContainer;
  22.     let viewer3D;
  23.     let app;
  24.     let model3D;
  25.     let viewToken = '48c4c5b367c348b08cca7a1b935226b9';
  26.     // 初始化显示组件
  27.     let options = new BimfaceSDKLoaderConfig();
  28.     options.viewToken = viewToken;
  29.    // BimfaceSDKLoader.load(options, successCallback, failureCallback);
  30.     BimfaceSDKLoader.load(options).then((viewMetaData)=>{
  31.       if (viewMetaData.viewType == "3DView") {
  32.         // ======== 判断是否为3D模型 ========
  33.         // 获取DOM元素
  34.         let dom4Show = document.getElementById('domId');
  35.         let webAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig();
  36.         webAppConfig.domElement = dom;
  37.         // 创建WebApplication
  38.         app = new Glodon.Bimface.Application.WebApplication3D(webAppConfig);
  39.         // 添加待显示的模型
  40.         app.addView(viewToken);
  41.         // 从WebApplication获取viewer3D对象
  42.         viewer3D = app.getViewer();
  43.         // 监听添加view完成的事件
  44.         viewer3D.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded, function () {
  45.           // 调用viewer3D对象的Method，可以继续扩展功能
  46.           //自适应屏幕大小
  47.           window.onresize = function () {
  48.             viewer3D.resize(document.documentElement.clientWidth, document.documentElement.clientHeight - 40)
  49.           }
  50.           // 从viewer3D对象中获取模型对象model3D
  51.           model3D = viewer3D.getModel();
  52.           // 渲染3D模型
  53.           viewer3D.render();
  54.         });
  55.       }
  56.     });
  57.     function successCallback(viewMetaData) {
  59.     }
  61.     function failureCallback(error) {
  62.       console.log(error);
  63.     }
  65.     //********************根据Id隐藏构件*********************
  66.     let isHideComponentsByIdActivated = false;
  68.     function hideComponentsById() {
  69.       if (!isHideComponentsByIdActivated) {
  70.         model3D.hideComponentsById(["307240", "267327", "307240", "259504", "264857"]);
  72.         viewer3D.render();
  73.         setButtonText("btnHideComponentsByObjectId", "显示构件");
  74.       } else {
  75.         //取消隐藏
  76.         model3D.showComponentsById(["307240", "267327", "307240", "259504", "264857"]);
  77.         viewer3D.render();
  78.         setButtonText("btnHideComponentsByObjectId", "根据ID隐藏构件");
  79.       }
  80.       isHideComponentsByIdActivated = !isHideComponentsByIdActivated;
  81.     }
  83.     //********************根据条件隐藏构件*********************
  84.     let isHideComponentsByDataActivated = false;
  86.     function hideComponentsByData() {
  87.       if (!isHideComponentsByDataActivated) {
  88.         //设置隐藏构件的条件
  89.         model3D.hideComponentsByObjectData([{
  90.           "levelName": "F2"
  91.         }, {
  92.           "levelName": "F1"
  93.         }, {
  94.           "levelName": "标高 5"
  95.         }]);
  96.         viewer3D.render();
  97.         setButtonText("btnHideComponentsByObjectData", "显示构件");
  98.       } else {
  99.         //取消隐藏
  100.         model3D.showComponentsByObjectData([{
  101.           "levelName": "F2"
  102.         }, {
  103.           "levelName": "F1"
  104.         }, {
  105.           "levelName": "标高 5"
  106.         }]);
  107.         viewer3D.render();
  108.         setButtonText("btnHideComponentsByObjectData", "根据条件隐藏构件");
  109.       }
  110.       isHideComponentsByDataActivated = !isHideComponentsByDataActivated;
  111.     }
  113.     // *********************** 按钮文字 ***********************
  114.     function setButtonText(btnId, text) {
  115.       let dom = document.getElementById(btnId);
  116.       if (dom != null && dom.nodeName == "BUTTON") {
  117.         dom.innerText = text;
  118.       }
  119.     }
  120.   }
  121. }
  122. </script>
  124. <!-- Add "scoped" attribute to limit CSS to this component only -->
  125. <style scoped>
  126. h1, h2 {
  127.   font-weight: normal;
  128. }
  129. .hello{
  130.   height: 100vh;;
  131. }
  132. ul {
  133.   list-style-type: none;
  134.   padding: 0;
  135. }
  136. li {
  137.   display: inline-block;
  138.   margin: 0 10px;
  139. }
  140. a {
  141.   color: #42b983;
  142. }
  143. </style>

版权说明 : 本文为转载文章, 版权归原作者所有 版权申明

原文链接 : https://code100.blog.csdn.net/article/details/123365336

内容来源于网络，如有侵权，请联系作者删除！

vue.jsJavaScriptwebpackvue

相关文章

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新文章

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com