news 2026/4/15 9:00:02

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

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
.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/PostGIS │ MongoDB │ Redis │ MinIO │ │ (业务+空间数据) │ (元数据) │ (缓存) │ (对象存储) │ └───────────────────────────────────────────────────────┘

项目结构

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、#Vue 3、#Three.js、#DDD架构、#3D场景管理、#异构存储、#PostGIS、#模型切片、#LOD自适应、#WebGL可视化

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

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/4/13 14:29:51

2025年AI论文生成网站推荐:10款支持LaTeX模板与格式工具

2025AI 哪个论文生成网站好?10 款含 LaTeX 模板与论文格式工具工具对比排名工具名称核心优势支持LaTeX适用场景aibiyeAIGC率降个位数,兼容知网规则是AI痕迹强处理aicheck学术改写优化,语义保留佳是格式统一化askpaper降重降AI一体&#xff0c…

作者头像 李华
网站建设 2026/4/14 11:30:43

FaceFusion镜像提供自动化部署脚本模板

FaceFusion镜像与高精度人脸替换:从部署到应用的工程实践 在短视频、虚拟偶像和数字人内容爆发式增长的今天,如何快速、稳定地生成高质量的人脸替换视频,已成为许多创作团队面临的核心挑战。传统AI模型部署方式往往“一次一配”,环…

作者头像 李华
网站建设 2026/4/14 16:55:18

Linux内核的Rust“转正”后,惊爆首个安全漏洞!

编译 | 苏宓出品 | CSDN(ID:CSDNnews)都说 Rust 是内存安全的编程语言,但现实正在敲响警钟。近日,Linux 内核维护者 Greg Kroah-Hartman 在邮件列表中确认,主线 Linux 内核中的一段 Rust 代码被正式登记为 …

作者头像 李华
网站建设 2026/4/2 17:02:09

FaceFusion如何提升戴围巾遮挡下颌线的融合自然度?

FaceFusion如何提升戴围巾遮挡下颌线的融合自然度? 在短视频直播盛行的今天,虚拟形象与实时换脸技术已不再是影视特效的专属工具。越来越多的内容创作者希望在保持个人风格的同时,通过人脸替换实现角色扮演、隐私保护或创意表达。然而&#x…

作者头像 李华
网站建设 2026/3/26 12:15:16

19、机器学习在无线通信中的应用:5G 及未来发展

机器学习在无线通信中的应用:5G 及未来发展 1. 引言 未来的先进技术涵盖多个领域,如电子医疗应用、工业 4.0 和大规模机器人技术、全息远程呈现、智能环境中的普遍连接、三维大规模无人驾驶移动、增强现实(AR)和虚拟现实(VR)等。这些下一代技术有望提供高质量和高效的性…

作者头像 李华
网站建设 2026/4/1 23:38:32

33、6G 无线网络:架构、优势与挑战

6G 无线网络:架构、优势与挑战 1. 无线通信网络的发展历程 互联网已成为全球热门话题,无论性别、年龄、国家和学历,人们都在使用互联网以获取更好的服务。从第二代到第五代,无线网络发生了巨大变化,从基本的语音通话服务发展到视频通话等高级服务,吸引了众多用户。 无…

作者头像 李华