.NET + Vue 3 + Three.js  企业级3D场景管理系统

前言

基于 ASP.NET Core 9.0、Vue 3 和 Three.js 的企业级3D真实场景管理系统,采用DDD分层架构和异构融合存储。

项目特点

后端架构

  • DDD分层设计
    Domain/Application/Infrastructure/API清晰分离

  • 异构存储– PostgreSQL/PostGIS + MongoDB + Redis + MinIO

  • GIS支持– NetTopologySuite空间数据处理

  • 高性能– 多级缓存、分布式存储、Redis会话管理

  • 容器化– Docker Compose一键部署

前端技术

  • WebGL渲染– Three.js + Cesium 3D场景可视化

  • 智能切片– 四叉树空间分割 + QEM网格简化

  • LOD自适应– 多层次细节自动切换

  • 纹理优化– 智能纹理重打包,减少文件体积

  • 现代化UI– 毛玻璃效果、渐变色、流畅动画

核心功能

  • 用户认证与JWT Token自动刷新

  • 3D场景管理与空间分析(PostGIS)

  • 3D模型切片系统(四叉树+LOD+纹理重打包)

  • 工作流引擎(可视化设计器)

  • 监控告警系统(系统指标+业务指标)

  • 8种3D格式支持(
    GLTF/GLB/OBJ/FBX/OSGB/IFC/STL/PLY)

技术栈

后端 (.NET 9.0)

ASP.NET Core 9.0
├── Entity Framework Core 9.0
├── PostgreSQL/PostGIS (空间数据)
├── MongoDB 3.0 (文档存储)
├── Redis 7 (缓存)
├── MinIO 6.0 (对象存储)
├── NetTopologySuite 2.5 (GIS)
├── SharpGLTF 1.0.5 (GLTF处理)
└── ImageSharp 3.1.11 (图像处理)

前端 (Vue 3)

Vue 3 + TypeScript
├── Three.js + Cesium (3D渲染)
├── Vite (构建工具)
├── Pinia (状态管理)
└── Axios (HTTP客户端)

项目使用

前提条件

  • .NET 9.0 SDK

  • Node.js 18+

  • Docker & Docker Compose

一键启动

# 1、启动存储服务
docker-compose -f docker-compose.storage.yml up -d

# 2、启动后端(新终端)
cd src/RealScene3D.WebApi
dotnet run

# 3、启动前端(新终端)
cd src/RealScene3D.Web
npm install && npm run dev

系统架构

┌─────────────────┐      ┌──────────────────────┐
│ 前端展示层 │ ←──→ │ Web API / MVC
│ (Vue + WebGL) │ │ (ASP.NET Core 9.0) │
│ │ │ - JWT认证 │
- 3D渲染引擎 │ │ - 切片任务管理 │
- LOD自适应 │ │ - 实时进度监控 │
- 视锥剔除 │ │ - 工作流引擎 │
└─────────────────┘ └──────────┬───────────┘

┌───────────────────┴──────────────────┐
│ 应用服务层 (C# .NET) │
- 用户管理 / 权限控制 │
- 场景管理 / 空间分析 │
- 切片生成流水线(四叉树分割) │
- 网格简化服务(QEM算法) │
- 工作流引擎 / 监控服务 │
└───────────────────┬──────────────────┘

┌───────────────────┴──────────────────┐
│ 数据服务层 (C# + GIS) │
- EF Core仓储模式 │
- NetTopologySuite空间处理 │
- 切片数据服务 │
- 纹理处理器 │
└───────────────────┬──────────────────┘

┌───────────────────────────┴───────────────────────────┐
│ 异构存储层 │
PostgreSQL/PostGISMongoDBRedisMinIO
│ (业务+空间数据) │ (元数据) │ (缓存) │ (对象存储) │
└───────────────────────────────────────────────────────┘

项目结构

3DRealScene/
├── src/
│ ├── RealScene3D.Domain/ # 领域层
│ │ ├── Entities/ # 11个实体类
│ │ ├── Geometry/ # 几何库(6,593行代码)
│ │ ├── Materials/ # 材质系统
│ │ └── Interfaces/ # 仓储接口
│ ├── RealScene3D.Application/ # 应用层
│ │ ├── Services/ # 39个业务服务
│ │ │ ├── Slicing/ # 切片服务
│ │ │ ├── Generators/ # 瓦片生成器
│ │ │ ├── Loaders/ # 8种模型加载器
│ │ │ ├── MeshDecimator/ # QEM网格简化
│ │ │ └── Workflows/ # 工作流服务
│ │ └── DTOs/ # 数据传输对象
│ ├── RealScene3D.Infrastructure/ # 基础设施层
│ │ ├── Data/ # PostgreSQL DbContext
│ │ ├── MongoDB/ # MongoDB集成
│ │ ├── Redis/ # Redis缓存
│ │ ├── MinIO/ # 对象存储
│ │ ├── Authentication/ # JWT认证
│ │ └── Workflow/ # 工作流引擎
│ ├── RealScene3D.WebApi/ # API层(11个控制器)
│ └── RealScene3D.Web/ # 前端(Vue 3 + TS)
│ ├── components/ # 20个Vue组件
│ ├── views/ # 15个页面
│ └── services/ # API服务
├── docker-compose.storage.yml
└── README.md

数据库迁移

# 创建迁移
cd src/RealScene3D.Infrastructure
dotnet ef migrations add MigrationName
--context PostgreSqlDbContext
--startup-project ../RealScene3D.WebApi

# 应用迁移
dotnet ef database update
--context PostgreSqlDbContext
--startup-project ../RealScene3D.WebApi

环境变量配置

{
"ConnectionStrings": {
"PostgreSqlConnection": "Host=localhost;Port=5432;Database=RealScene3D;Username=postgres;Password=postgres",
"MongoDbConnection": "mongodb://localhost:27017",
"RedisConnection": "localhost:6379"
},
"MinIO": {
"Endpoint": "localhost:9000",
"AccessKey": "minioadmin",
"SecretKey": "minioadmin123"
},
"JwtSettings": {
"SecretKey": "your-secret-key-here",
"Issuer": "RealScene3D.WebApi",
"Audience": "RealScene3D.Client",
"ExpirationMinutes": 60
}
}

Docker部署

启动存储服务

docker-compose -f docker-compose.storage.yml up -d

服务健康检查

# PostgreSQL
docker exec realscene3d-postgres pg_isready -U postgres

# MongoDB
docker exec realscene3d-mongodb mongosh --eval "db.adminCommand('ping')"

# Redis
docker exec realscene3d-redis redis-cli -a redis123 ping

# MinIO
curl http://localhost:9000/minio/health/live

故障排除

常见问题

Q: 数据库连接失败

# 检查Docker容器状态
docker ps | grep postgres

# 查看日志
docker logs realscene3d-postgres

Q: 切片任务卡住

  • 检查源模型文件是否完整

  • 降低切片复杂度(减少Divisions和LodLevels)

  • 检查系统内存是否充足

Q: MinIO上传失败

# 创建缺失的存储桶
mc mb myminio/models-3d

关键词

ASP.NET Core 9、 3、.js、、、、、、、

为了防止丢失,可以在评论区留言关键字「场景管理」,即可获取完整源码地址。

.NET + Vue 3 + Three.js  企业级3D场景管理系统

© 版权声明

相关文章

5 条评论

  • 头像
    放过姐行吗a 投稿者

    @豆包 请给出本文提到的软件的开源地址

    无记录
    回复
  • 头像
    赋柳意 投稿者

    全是框架,真正的管理功能有啥?

    无记录
    回复
  • 头像
    多财多亿大吉利 投稿者

    vue+three.js

    无记录
    回复
  • 头像
    另一只耳机给我_ 读者

    场景管理

    无记录
    回复
  • 头像
    -鸢尾信笺- 读者

    收藏了,感谢分享

    无记录
    回复