logo
0
0
WeChat Login

IFC Model Viewer & Analyzer

基于 Web 的 IFC 建筑模型查看与参数统计分析系统。

技栈

  • 前端: TypeScript + Three.js + WebIFC (原生 TypeScript,无框架)
  • 后端: FastAPI + SQLite
  • 构建: Vite + TypeScript

核心功能

  • 用户管理 - 登录、注册
  • IFC 文件管理 - 管理员上传/下载/删除
  • 3D 模型查看 - 模型浏览、旋转、缩放、多视角切换
  • 构件选择 - 点击构件高亮显示
  • 属性面板 - 显示选中构件的属性信息(支持搜索与 Pset 分组)
  • 参数筛选与统计 - 按构件类型筛选并统计数量、面积、体积

项目结构

/workspace/ ├── src/ # TypeScript 源代码 │ ├── index.ts # 入口文件 │ ├── Viewer3D.ts # 主查看器类 │ ├── core/ # 核心系统 │ │ └── Events.ts # 事件系统 │ ├── loaders/ # 加载器 │ │ └── IFCLoader.ts # WebIFC 集成 │ ├── materials/ # 材质管理 │ │ └── MaterialManager.ts # 材质缓存 │ ├── selection/ # 选择系统 │ │ └── SelectionManager.ts # 选择管理 │ ├── properties/ # 属性提取 │ │ └── PropertyManager.ts # IFC 属性提取 │ ├── ui/ # UI 组件 │ │ └── UIManager.ts # UI 协调 │ ├── utils/ # 工具函数 │ │ ├── ApiClient.ts # API 客户端 │ │ └── GeometryUtils.ts # 几何工具 │ └── types/ # TypeScript 类型定义 │ ├── IFCInterfaces.ts # IFC 类型 │ └── ViewerTypes.ts # 查看器类型 │ ├── public/ # 静态资源 │ ├── styles/main.css # CSS 样式 │ └── web-ifc/ # WebIFC WASM 文件 │ ├── backend/ # FastAPI 后端 │ ├── main.py # API 入口 │ └── requirements.txt │ ├── dist/ # 构建输出 ├── package.json ├── tsconfig.json ├── vite.config.ts └── Dockerfile

架构设计

Viewer3D 主类 (Monolithic Pattern)

参考 bim-viewer 的设计,所有核心功能封装在 Viewer3D 主类中:

  • 场景、相机、渲染器管理
  • IFC 加载与几何合并
  • 选择系统
  • 视图控制

几何优化

  • 按构件类型合并几何体,减少 Draw Call
  • 材质缓存复用,减少 GPU 开销
  • 视锥剔除和 LOD 管理

选择系统

  • Raycaster 实现点击选择
  • 材质替换实现高亮效果
  • 事件驱动的选择通知

快速开始

本地开发

# 安装依赖 npm install # 启动前端开发服务器 npm run dev # 启动后端(另一个终端) cd backend pip install -r requirements.txt uvicorn main:app --reload --port 7860

构建

npm run build

Docker 部署

docker build -t ifc-viewer . docker run -d -p 7860:7860 -v ifc-data:/app/data ifc-viewer

访问

API 接口

认证

  • POST /token - 登录获取 JWT
  • POST /register - 注册用户

IFC 文件管理 (需认证)

  • GET /ifc/files - 获取文件列表
  • POST /ifc/upload - 上传 IFC 文件 (仅管理员)
  • GET /ifc/data/{file_id} - 获取 IFC 文件数据 (二进制)
  • GET /ifc/download/{file_id} - 下载 IFC 文件 (仅管理员)
  • DELETE /ifc/delete/{file_id} - 删除 IFC 文件 (仅管理员)

开发计划

  • 项目重构 - TypeScript + Vite
  • 用户认证 (登录/注册)
  • IFC 文件管理 (上传/下载/删除)
  • 3D 模型查看器 (WebIFC + Three.js)
  • 参数筛选与统计
  • 构件选择与高亮
  • 属性面板
  • 楼层筛选支持
  • 剖面切割
  • 测量工具

许可证

MIT

About

No description, topics, or website provided.
Language
JavaScript82.2%
TypeScript15.9%
HTML1%
CSS0.4%
Others0.5%