BIM-Adapter 工具库

项目概述

BIM-Adapter 是一个功能丰富的 BIM (Building Information Modeling) 工具库，基于 sadi-sdk-ts 封装，提供了完整的 BIM 模型加载、场景管理、构件操作、空间管理等功能。

该库为前端开发提供了一系列实用工具，特别是在处理 BIM 模型时提供了完整的解决方案，包括模型加载、场景管理、构件操作、空间管理等功能。

目录结构

bim-adapter/
├── src/
│   ├── index.ts                # 主类和工具函数
│   ├── modules/                # 功能模块
│   │   ├── component.ts        # 构件模块
│   │   ├── componentBase.ts    # 构件基础类
│   │   ├── label.ts            # 标签模块
│   │   ├── scene.ts            # 场景模块
│   │   ├── space.ts            # 空间模块
│   │   └── view.ts             # 视图模块
│   ├── loading.ts              # 加载组件
│   ├── mitt.ts                 # 事件总线
│   ├── storage.ts              # 存储工具
│   └── toolsValidate.ts        # 验证工具
├── README.md                   # 文档
├── package.json                # 项目配置
├── tsconfig.json               # TypeScript 配置
└── vite.config.ts              # Vite 配置

安装

依赖项

• dayjs: 日期处理
• element-plus: UI 组件库
• sadi-sdk-ts: BIM 模型加载和渲染
• gl-matrix: 矩阵运算
• vue: 前端框架
• js-cookie: Cookie 处理
• mitt: 事件总线

安装命令

npm install dayjs element-plus sadi-sdk-ts gl-matrix vue js-cookie mitt

快速开始

模型实例化

import { BIMWrap } from "./src";

// 初始化 BIM 实例  modelSize 模型大小
const bimWrap = new BIMWrap({
  token: { type: "directlyLoad", value: "modelSize" },
  containerId: "bim-container",
  bimUrl: "path/to/model.sadi",
  sceneContextParam: {
    background: "#030d20",
    highlightColor: "#FF9A3C",
    // 其他场景参数...
  },
});

// 启动模型
await bimWrap.start();

核心模块

1. 构件模块 (Component)

主要功能

• 显示/隐藏构件
• 冻结构件
• 设置构件颜色
• 高亮构件
• 泛光效果
• 构件操作（移动、缩放、旋转、删除）

方法列表

| 方法名 | 参数 | 说明 | | --------------------------------- | ----------------------------------------------------------------------------------- | ------------------------------------------- | | freezeByElement | elements: any \| any[] | 冻结构件 | | showElementsByIndexs | indexs: number[] | 根据索引显示构件 | | showElementsByIds | ids: number[] | 根据ID显示自定义构件 | | hideElementsByIndexs | indexs: number[] | 根据索引隐藏构件 | | hideElementsByIds | ids: number[] | 根据ID隐藏自定义构件 | | hideElementsByElements | elements: any[] | 根据构件对象隐藏构件 | | getElementByIndex | index: number \| number[], options?: { excludes: [] } | 根据索引获取构件 | | getElementByIndexTwo | index: number \| number[], options?: { excludes: [] } | 根据索引获取构件（另一种实现） | | getAllElement | 无 | 获取所有构件 | | hideAll | 无 | 隐藏所有构件 | | getVisibleElements | 无 | 获取当前场景可见元素 | | showAll | 无 | 显示所有构件 | | getElementByIdFormInit | id: number \| number[], options?: { excludes: any[] } | 根据ID查找构件 | | getElementById | id: number \| number[], options?: { excludes: any[] } | 根据原始ID查找构件 | | freezeByIndex | indexs: number[] | 根据索引数组冻结构件 | | unlockAll | 无 | 解冻所有元素 | | setInstanceColor | ins: any \| any[], options: { color: string; opacity?: number } | 设置几何体颜色 | | setElementColor | element: any \| any[], opts: { color: string; opacity?: number } | 设置构件颜色 | | changeAllElementsColor | color: string, opacity: number = 1 | 修改所有构件颜色 | | resetAllElementsColor | 无 | 清除构件上所有颜色 | | setBloomParams | params: { range: number; exposure: number } | 设置泛光参数 | | addBloomByElement | elements: any[] | 根据构件元素设置泛光 | | clearBloom | 无 | 清除泛光效果 | | highlightObjects | objects: sadi.SelectResult[], opts?: { isClearOlderHighlight: boolean } | 高亮构件 | | clearHighlightElements | 无 | 清除所有高亮 | | setIsolationHighlights | flag: boolean | 设置隔离高亮 | | showElementsByElements | elements: any[], opts?: { hideOther: boolean } | 显示构件 | | getTemplateByFile | file: File | 根据文件获取构件模板 | | placeComponents | buffer: ArrayBuffer, point: vec3[], id: number[] | 根据文件放置构件 | | getComponentCenterByIndex | index: number | 根据索引获取构件中心点 | | getComponentCenterByIndexTwo | index: number | 根据索引获取构件中心点（Z为最小值） | | getComponentCenterByCustomId | ids: number[] | 根据自定义构件ID获取构件中心点 | | getComponentCenterByCustomIdTwo | ids: number[] | 根据自定义构件ID获取构件中心点（Z为最小值） | | getComponentCenterByElement | element: Element | 根据构件对象获取中心点 | | getComponentTopByElement | element: Element | 根据构件对象获取顶点 | | moveComponents | elementArr: Element[], arr: [number, number, number] = [0, 0, 0] | 移动构件 | | scaleComponents | elementArr: Element[], arr: [number, number, number] = [1, 1, 1] | 缩放构件 | | rotateComponents | elementArr: Element[], arr: [number, number, number] = [0, 0, 0], rad: number = 0 | 旋转构件 | | deleteComponents | elementArr: Element[] | 删除构件 | | getComponentAxis | element: Element | 根据构件对象获取轴心坐标 | | saveNewComponent | 无 | 保存新构件 | | loadExtraElements | buffer: ArrayBuffer | 加载新建构件 | | enableAxis | element: Element, flag: boolean, fun?: Function | 绘制平移坐标轴 | | getElementByCustomId | ids: number[] | 根据ID查找自定义构件元素 | | setComponentLocation | element: Element, loc: [number, number, number] | 根据构件与坐标设置构件位置 |

使用示例

// 显示指定索引的构件
bimWrap.componentWrap.showElementsByIndexs([1, 2, 3]);

// 设置构件颜色
bimWrap.componentWrap.setElementColor(elements, {
  color: "#ff0000",
  opacity: 1,
});

// 高亮构件
bimWrap.componentWrap.highlightObjects(selectedElements);

2. 空间模块 (Space)

主要功能

• 空间显示/隐藏
• 绘制空间、墙、管道
• 空间操作

方法列表

| 方法名 | 参数 | 说明 | | -------------------- | --------------------------------------------------------- | ---------------- | | showSpaceByIndexs | spaceIndexs: number[], opts?: { hideBefore: boolean } | 根据索引展示空间 | | hideSpace | 无 | 隐藏空间 | | hideSpaceByIndexs | spaceIndexs: number[] | 根据索引隐藏空间 | | getAllSpace | 无 | 获取所有空间 | | drawSpace | flag: boolean | 绘制空间 | | createSpace | id: number | 创建空间 | | clearLine | 无 | 清空线条 | | closeAxis | 无 | 关闭坐标轴 | | modifySpaceHeight | heightVal: number | 修改空间的高度 | | drawWall | flag: boolean | 绘制墙 | | createWall | id: number | 创建墙 | | modifyWallHeight | heightVal: number | 修改墙的高度 | | modifyWallGauge | gaugeVal: number | 修改墙的厚度 | | modifyPipeDiameter | gaugeVal: number | 修改管道直径 | | drawPipeOpen | flag: boolean | 开启管道绘制 | | drawPipe | 无 | 绘制管道 | | createPipe | id: number | 创建管道 | | createComponent | id: number, geo: any, type: Category, color: sadi.Color | 创建构件 | | getPipeLen | 无 | 获取管道长度 | | cancelCreate | currentWall: WallWire \| PipeWire \| SpaceWire | 取消创建 | | postionElement | element: sadi.Element \| sadi.Element[] | 定位构件 |

使用示例

// 绘制空间
await bimWrap.spaceWrap.drawSpace(true);

// 创建空间
const spaceElement = await bimWrap.spaceWrap.createSpace(1001);

// 绘制墙
await bimWrap.spaceWrap.drawWall(true);

// 创建墙
const wallElement = await bimWrap.spaceWrap.createWall(1002);

3. 视图模块 (View)

主要功能

• 视图恢复
• 视图动画
• 环境参数设置
• 相机控制
• 场景结构树
• 漫游功能

方法列表

| 方法名 | 参数 | 说明 | | --------------------------- | ---------------------------------------------------------------------------------------------- | ------------------------ | | recovery | componentWrap: Component, spaceWrap: Space | 恢复视图 | | updateSize | 无 | 视图自适应 | | setCamera | data: any | 视图动画 | | getScreenShotPic | 无 | 获取视图 | | getCameraInfo | 无 | 获取视点 | | setSelectMode | type: number | 设置模式 | | setBackgroundImage | url?: string | 设置背景图片 | | initViewWrapEnvParams | 无 | 初始化视图环境参数 | | changeEnvParams | params: IChangeEnvParams | 属性组合设置 | | getSceneContext | sadiIns: BIMWrap | 获取视图上下文 | | getStoreyList | 无 | 获取场景中所有楼层 | | getstructureTree | 无 | 获取场景结构树 | | bindClick | event: any | 绑定点击事件 | | showCube | 无 | 显示导航立方体 | | hideCube | 无 | 隐藏导航立方体 | | changeCubePositionAndSize | { size = 200, position: { top: number; left: number } } | 导航立方体位置和大小修改 | | enableNavigationCube | isShow: boolean | 导航立方体显示隐藏 | | roam | start: boolean, opts?: { location: vec3; angle: number; height: number; floor: sadi.Storey } | 漫游 | | move3D | mv: vec3 | 场景移动 | | scale | ratio: number | 场景缩放 | | rotateCamera | 静态工具对象，包含多个子方法 | 旋转相机（静态工具对象） | | rotateCamera.active | param: vec3 | 激活相机并设置位置 | | rotateCamera.setLocation | param: vec3 | 设置平移相机位置 | | rotateCamera.getLocation | 无 | 获取相机位置 | | rotateCamera.setEuler | param: vec3 | 设置旋转相机角度 | | rotateCamera.getEuler | 无 | 获取相机角度 | | rotateCamera.getInstance | 无 | 获取相机旋转实例 | | rotateCamera.deactive | 无 | 取消激活相机平移、旋转 | | dispose | 无 | 销毁 |

使用示例

// 恢复视图
bimWrap.viewWrap.recovery(bimWrap.componentWrap, bimWrap.spaceWrap);

// 设置环境参数
bimWrap.viewWrap.changeEnvParams({
  background: "#F6F7F9",
  light: {
    color: "rgba(255,255,235,1)",
    phi: 109,
    theta: 40,
  },
});

// 获取场景结构树
const structureTree = bimWrap.viewWrap.getstructureTree();

// 漫游功能
bimWrap.viewWrap.roam(true, {
  location: [0, 0, 0],
  angle: 0,
  height: 1800,
  floor: floor,
});

// 旋转相机操作
// 激活相机并设置位置
bimWrap.viewWrap.rotateCamera.active([0, 0, 1000]);

// 设置相机位置
bimWrap.viewWrap.rotateCamera.setLocation([100, 100, 1500]);

// 获取相机位置
const cameraLocation = bimWrap.viewWrap.rotateCamera.getLocation();

// 设置相机旋转角度（欧拉角，单位：度）
bimWrap.viewWrap.rotateCamera.setEuler([0, 45, 0]);

// 获取相机旋转角度
const cameraEuler = bimWrap.viewWrap.rotateCamera.getEuler();

// 获取相机旋转实例
const cameraInstance = bimWrap.viewWrap.rotateCamera.getInstance();

// 取消激活相机
bimWrap.viewWrap.rotateCamera.deactive();

4. 场景模块 (Scene)

主要功能

• 剖切操作（正交剖切、面剖切）
• 测量功能
• 坐标转换
• 场景交互控制

方法列表

| 方法名 | 参数 | 说明 | | ------------------------- | ----------------------------------------- | ---------------------------- | | clearFaceCut | flag: boolean | 剖切 | | setOrthogonalSectioning | flag: boolean | 正交剖切 | | setFaceSectioning | flag: boolean | 面剖切 | | clearCut | 无 | 清除剖切模式 | | recoverSectionBox | showSectionBox: boolean | 激活/关闭剖切框 | | setFaceSectioningByFace | face: any | 选择某一个面 | | setCut | flag: boolean, sectionType: number | 裁剪 | | setElevation | height: any, type: string | 设置标高 | | setMeasure | flag: boolean | 测量 | | setSnappoint | flag: boolean | 是否启动抓取构件的点 | | selectCoordinate | x: number, y: number, model: SelectMode | 通过屏幕坐标选择 | | setRotate | flag: boolean | 设置是否能旋转模型 | | setScale | flag: boolean | 设置是否能滚轮滑动 | | setMove | flag: boolean | 设置是否能平移模型 | | convert3Dto2D | p: vec3 | 场景3D坐标转换为屏幕坐标 | | convert3Dto2Ds | piniaSelecteds: vec3[] | 场景3D坐标转换为屏幕坐标多个 |

使用示例

// 设置正交剖切
bimWrap.sceneWrap.setOrthogonalSectioning(true);

// 设置测量模式
bimWrap.sceneWrap.setMeasure(true);

// 3D 坐标转换为屏幕坐标
const screenPoint = bimWrap.sceneWrap.convert3Dto2D([10, 10, 10]);

5. 标签模块 (Label)

主要功能

• 添加/清除标签
• 支持文字标签、DOM 标签、图片标签
• 标签事件绑定

方法列表

| 方法名 | 参数 | 说明 | | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | | clearTag | 无 | 清除所有标签 | | clearTagInit | 无 | 清除所有标签（初始化） | | clearTagById | id: number | 清除指定ID标签 | | renderTag | tagArr: any[], options: { projectId: string; sadiId: string; prefixUrl: string; prefixUrlFile: string; tokenParams: TokenParamsJSON; bindEventStatus?: boolean }, isEditIdArr?: number[], renderType: 'cover' \| 'merge' = 'merge', threeTagEvent?: (event?: any) => void | 渲染标签 | | addTextTag | textLabelOpts: { data: string; shadowColor: string; font: string; fontColor: string; fontBackColor: string; point: vec3 }[] | 添加文字标签 | | addDomTag | domTagOpts: { props: any; vnode?: any; data: HTMLElement; point: vec3; shadowColor?: any; font?: any; fontColor?: any; fontBackColor?: any }[] | 添加DOM标签 | | addImgTag | imgTagOpt: { src: string; point: number[] }[] | 添加图片标签 |

使用示例

// 渲染标签
bimWrap.labelWrap.renderTag(tagArr, {
  projectId: "project-1",
  sadiId: "model-1",
  prefixUrl: "/api",
  prefixUrlFile: "/files",
  tokenParams: { token: "your-token" },
});

// 添加文字标签
bimWrap.labelWrap.addTextTag([
  {
    data: "标签文本",
    shadowColor: "#000",
    font: "14px Arial",
    fontColor: "#fff",
    fontBackColor: "#ff0000",
    point: [0, 0, 0],
  },
]);

主类方法

| 方法名 | 参数 | 说明 | | -------------------------- | ------------------------------------------------------------------ | -------------------- | | start | 无 | 初始化并加载模型 | | dispose | 无 | 销毁 BIM 实例 | | loading | opts?: any | 显示加载动画 | | downloadColorScheme | name: string, buffer: ArrayBuffer, mediums: sadi.RecordMedium[] | 下载颜色方案 | | setColorRecord | data: any | 设置色彩方案 | | setColorScheme | data: any, mediums: sadi.RecordMedium[] | 导出颜色方案 | | getNewColorRecord | isBlank?: boolean | 颜色方案记录 | | getVisibleBuffer | mediums: sadi.RecordMedium[] | 显隐方案获取 | | setfromVisibleBuffer | data: ArrayBuffer, mediums: sadi.RecordMedium[] | 设置可见性方案 | | setGroupScheme | groupData: any, buffer: any, mediums: sadi.RecordMedium[] | 设置打组方案 | | getGroupScheme | data: any, mediums: sadi.RecordMedium[] | 获取打组方案 | | getScreenShot | 无 | 页面截图并下载 | | setCad | data: { cad: HTMLImageElement; points: Float32Array } | 设置CAD模型 | | clearTag | 无 | 清除所有标签 | | clearCut | 无 | 清除剖切 | | getSectionPlane | 无 | 获取剖切平面 | | setFaceByOriginAndNormal | origin: Float32Array, normal: Float32Array, flag: boolean = true | 根据原点和法线设置面 | | getFacePoints | 无 | 获取面的点 | | getLoadStatus | 无 | 获取加载状态 |

辅助工具

1. 加载组件

import { NextLoading } from "./src/loading";

// 显示加载动画
NextLoading.start();

// 隐藏加载动画
NextLoading.done();

2. 事件总线

import mittBus from "./src/mitt";

// 监听事件
mittBus.on("eventName", (data) => {
  console.log(data);
});

// 触发事件
mittBus.emit("eventName", { message: "Hello" });

3. 存储工具

import { Local, Session } from "./src/storage";

// 本地存储
Local.set("key", "value");
const value = Local.get("key");
Local.remove("key");
Local.clear();

// 会话存储
Session.set("key", "value");
const value = Session.get("key");
Session.remove("key");
Session.clear();

4. 验证工具

import {
  verifyPhone,
  verifyEmail,
  verifyIdCard,
  verifyPassword,
  // 其他验证函数...
} from "./src/toolsValidate";

// 验证手机号
const isPhoneValid = verifyPhone("13800138000");

// 验证邮箱
const isEmailValid = verifyEmail("[email protected]");

// 验证身份证
const isIdCardValid = verifyIdCard("110101199001011234");

// 验证密码
const isPasswordValid = verifyPassword("MyPassword123");

完整使用示例

基本 BIM 模型加载和操作

import { BIMWrap } from "./src";

// 初始化 BIM 实例
const bimWrap = new BIMWrap({
  token: { type: "bearer", value: "your-token" },
  containerId: "bim-container",
  bimUrl: "path/to/model.sadi",
});

// 启动模型
await bimWrap.start();

// 显示加载动画
bimWrap.loading();

// 隐藏所有构件
bimWrap.componentWrap.hideAll();

// 显示指定构件
bimWrap.componentWrap.showElementsByIndexs([1, 2, 3]);

// 设置构件颜色
bimWrap.componentWrap.setElementColor(
  bimWrap.componentWrap.getElementByIndex([1, 2, 3]),
  { color: "#ff0000", opacity: 1 },
);

// 添加标签
bimWrap.labelWrap.renderTag(
  [
    {
      id: 1,
      iconId: "icon-1",
      location: [0, 0, 0],
      description: "标签描述",
    },
  ],
  {
    projectId: "project-1",
    sadiId: "model-1",
    prefixUrl: "/api",
    prefixUrlFile: "/files",
    tokenParams: { token: "your-token" },
  },
);

// 设置剖切
bimWrap.sceneWrap.setOrthogonalSectioning(true);

// 截图
bimWrap.getScreenShot();

// 销毁实例
// bimWrap.dispose();

// 定位
bimWrap.spaceWrap.postionElement(element);

// 根据index获取构件
bimWrap.componentWrap.getElementByIndex(1001);

注意事项

1. 依赖项: 确保安装了所有必要的依赖项，特别是 sadi-sdk-ts，它是 BIM 功能的核心依赖。

2. Token: 使用 BIM 功能时，需要提供有效的 token 用于模型加载和API调用。

3. 容器: BIM 模型需要一个 DOM 容器来渲染，确保容器存在且有合适的尺寸。

4. 性能: 处理大型 BIM 模型时，请注意性能优化，避免同时操作过多构件。

5. 浏览器兼容性: 建议在现代浏览器中使用，以获得最佳性能和体验。

总结

BIM-Adapter 工具库提供了丰富的功能，特别是在 BIM 领域，为开发者提供了一套完整的解决方案。通过封装 sadi-sdk-ts，它简化了 BIM 模型的加载、渲染和操作，同时提供了一系列通用工具函数，方便前端开发。

该库设计合理，模块化程度高，易于集成到各种项目中。第三方开发者可以根据需要使用其中的特定功能，也可以完整使用整个 BIM 解决方案。