持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第9天，点击查看活动详情

介绍

bcbim 是基于 babylonJs 的一个轻量化模型加载解析引擎，可以上传解析 .rvt 格式的BIM模型文件，并对其进行操作。 可实现选中高亮，构件显示隐藏，添加标注文字图片、测距、框选、标记空间、设置颜色和模型剖切等等操作。

rvt是什么

rvt有两种文件类型，主要相关联软件程序是由 Autodesk, Inc. 开发的 AutoCAD Architecture。 通常这些被格式化为 Revit Project File。 这些文件分为 CAD Files 或 Data Files。 在大多数情况下，这些文件属于 CAD Files。

1. Rvt 格式的文件需要用 AutodeskRevitArchitecture ，或简称 Revit 软件打开。

2. Revit 是 Autodesk 公司一套软件的名称。

3. Revit 系列软件是专为建筑信息模型打造的的，可帮助建筑设计师设计、建造和维护质量更好、能效更高的建筑。

4. Revit 是我国 建筑业BIM体系 中使用最广泛的软件之一。

使用

场景初始化

1. 创建容器（必须）

   第一步就是创建canvas容器。

   <canvas id="canvasDom"></canvas>
   

2. script 引入文件

   后续优化版本无需引入 babylon.js 以及 meshwriter.min.js 只需引入bcbim.js即可，这里拿最初版本做演示。

   <script src="./babylon.js"></script>
   <script src="./meshwriter.min.js"></script>
   <script src="./axios.min.js"></script>
   <script src="./axios.js"></script>
   

3. script标签type=“module”

   这里需要注意一定要写type=“module”。

   <script type="module">
   </script>
   

4. 容器样式

   这里可以设置容器大小、边框、位置等等。

   #canvasDom{
      outline: none;
   }
   

5. 初始化api

   初始化api，配置背景颜色、选中颜色以及高亮颜色等属性，初始化场景

   <script type="module">
       import bimApi from './bcbim.js'
       const defaultProps ={ 	
           appKey: null,//应用key
           canvasDom:document.getElementById('canvasDom'),//获取容器dom
           bgColor:'#28cbe7',//场景背景颜色
           selectedcolor:'#ffffff',// 选中颜色
           highlightColor: '#1ed4b4',//高亮颜色
       }
       let api = new bimApi(defaultProps); // 创建实例
       api.initScene().then(res =>{// 初始化场景
        //初始化完成   
       }).catch(err =>{
         //初始化失败
       });
   </script>
   

设置镜头位置和朝向

api.setCamera(position,target)

接口描述

设置场景中镜头所在位置和镜头朝向，决定视图中模型的角度，位置和大小。

传入参数

• position: 镜头位置（必填）

  {
  	x:0，// X轴坐标
  	y:0,// y轴坐标
  	z:0//z轴坐标
  }
  

• target: 镜头朝向位置（必填）

  {
  	x:0，// X轴坐标
  	y:0,// y轴坐标
  	z:0//z轴坐标
  }
  

✒️ 调用示例

let position = {
	x:0，// X轴坐标
	y:0,// y轴坐标
	z:50//z轴坐标
};
let target = {
	x:0，// X轴坐标
	y:0,// y轴坐标
	z:0//z轴坐标
};
api.setCamera(position,target)

上传模型文件

api.uploadModel(file);

接口描述

上传需要展示的revit模型文件;

传入参数

• file：文件file(必填)

调用实例

//此为原生js调用方法；
let file = event.target.files[0]; //获取上传
const formData = new FormData()
formData.append('file', file)
api.uploadModel(formData).then(res => { //成功回调
    console.log(res)
//    {
//        data: null
//        msg: "上传成功"
//        status: 20
//    }
}).catch(err=>{// 失败回调
    console.log(err)
// 请上传revit模型文件
})