基于Vue和Nest搭建的Web3D汽车组装演示系统

本文只是对该项目进行简要说明，不对具体技术实现进行详细描述！！（可以将本文看作项目说明文档食用）

一、前言

本项目是一个毕业设计的选题，由于绝大部分是大数据和电商相关的选题，最终选择了这个比较新颖的选题，就想着尝试去挑战一下自己。

其实当时脑子里对这个选题完全没有头绪，有好几次在思考这个项目怎么实现的时候，头皮发麻觉得已经超出了当前能力水平，所幸找到了实现思路和方向，于是开始着手为项目开发做准备，比如去学习需要运用的技术栈、设计项目开发思路和项目架构设计以及搭建。

其实本文用到的很多技术栈都是我比较陌生或者没接触过的，因此在学习上也花费了较多的时间，比如说TypeScript、Three.js、Nest和TypeORM等，所以项目中会存在不足和不合理的地方，欢迎大家指出来哈！

项目背景

此项目是基于JavaScript语言开发的3D可视化Web应用程序，为了设计出轻量级的互联网应用程序，采用B/S系统架构，在基于WebGL的3D可视化交互平台基本构架的基础上，设计出集沉浸感与良好交互操作于一体的汽车组装过程的可视化Web页面。主要实现了汽车组装模块、用户中心模块和车辆信息模块功能。

本系统希望通过互联网技术，让人们能够以人机交互的方式感受到汽车组装过程，解决人们与汽车之间相互了解带来的鸿沟，并且可通过用户汽车组装获取的数据进行分析，推动汽车行业发展。

二、相关技术概述

由于该项目是独立开发的，因此运用的都是前端领域的技术栈，并作为互联网项目进行开发。

前端技术

为了方便项目维护，将前端项目分为了前台和后台，相互独立进行开发的。

前端需要解决的难点是对汽车组装过程的实现，在前期的技术选型过程中，最终选择使用WebGL技术提供了将3D模型渲染在Web网页上显示的能力，由于该技术相对底层，所以选择Three.js封装库，主要是其提供了能够通过简单的方式就可以实现包括相机、光源、场景、控制器以及3D模型等对象的三维场景。在实现汽车组装功能模块的过程中，对该模块封装成了单独的组件便于在项目中维护和复用。

相关技术栈：

• WebGL：为了将JavaScript和OpenGL ES2.0相结合而推出的底层Web3D绘图API标准；
• Three.js：轻量级基于原生WebGL封装运行的三维引擎；
• Vue 3.0：一套用于构建用户界面的渐进式框架；
• Element Plus：基于Vue 3.0的桌面端组件库；
• axios：易用、简洁且高效的http库；

后端技术

前期对后端技术选型的过程中，在选择后端框架的过程中，在比较了egg、koa和nest框架后，选择了nest框架。

采用Node.js服务端应用框架Nest和关系型MySQL数据库，并以JavaScript弱类型语言的超集TypeScript进行开发，使用MVC架构为后期的开发和维护降低成本，并以RestAPI的形式向视图层提供接口服务，为实现通过更轻量级的方法来共享组件，以Nest框架提供的Monorepo模式进行开发，为平台开发高效、可扩展的企业级后端服务。同时集成了通过Passport和JWT策略实现了用户身份验证和邮箱验证等功能。

这里讲一下我个人喜欢Nest框架的原因，从框架风格角度，Nest框架的写法和Java的Spring框架非常类似，由于笔者对Spring框架本身有一定熟练度，所以上手Nest也比较快；从模块复用角度，后为了方便端代码维护，将前台服务和后台服务在一个Workspace中分为了两个Project，而Nest提供了Monorepo模式，将库以一种简单、轻量级的方式提供了一种共享代码的方式，恰好满足项目需求，将重复使用的模块以库的形式在多个Project中共享使用。

相关技术栈：

• Node.js：基于Chrome V8引擎构建的JavaScript运行时服务端平台；
• Nest：开箱即用的Node.js服务器端应用程序的框架；
• Redis数据库：跨平台非关系型数据库；
• TypeORM：对象关系映射器（ORM）框架；
• JWT认证技术：目前最流行的跨域认证解决方案；
• MySQL数据库：目前最流行的关系型数据库系统之一；
• TypeScript：JavaScript类型的超集；

三、系统分析与设计

系统分析

本系统分为汽车组装演示系统和后台管理系统，汽车组装演示系统包括了用户信息管理模块、汽车组装模块以及官方汽车品牌模块，其中核心技术是汽车组装模块，实现了用户可通过人机交互的形式组装自己想要的汽车型号、配置和车身颜色等功能；而后台管理系统主要是用户管理模块、数据统计分析、汽车管理模块以及品牌管理模块。

系统用户用例图

系统架构

本项目是基B/S架构进行设计，前端视图层技术的搭建则使用Vue.js框架实现，3D可视化技术则采用基于WebGL封装的Three.js引擎库。而服务端技术则由Node.js服务端应用框架Nest搭建，集成了JWT用户身份认证、Redis缓存以及ORM对象关系映射器，数据持久层是通过MySQL关系型数据库存储。

系统功能模块设计

前台系统功能结构

后台系统功能结构

四、系统功能实现

前台系统功能实现

登陆注册界面

前台首页

车型库

用户中心

汽车详情

汽车组装

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bYyEqyy5-1624276470663)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9b4f851ee4af43aeb849102fe0828824~tplv-k3u1fbpfcp-watermark.image)]

后台系统功能实现

后台数据分析

用户管理界面

官方车辆界面

品牌管理界面

五、总结与展望

总结

这个项目从确定选题到顺利完成项目答辩，这个过程对我来说有许多的成长，这个过程按时间顺序主要可以划分为以下几件事情：

• 前期对整个项目进行规划，明确设计思路，进行系统功能需求分析和技术选型；
• 学习相关技术以及验证技术可行性，同时学习和了解了许多开源项目架构搭建的思想；
• 项目架构设计和搭建，其中包括数据库设计、前后端项目架构设计等；
• 完成整体项目的业务需求开发；

展望

这个项目我个人认为还有很大的优化和改良空间，但由于本人即将成为社畜，可能会比较少精力继续去完善，但最主要需要完善的地方为以下几点：

1. 本系统的核心功能是汽车组装功能模块的实现，由于采用3D引擎渲染技术，所用的汽车模型类别单一，需要考虑通过导入汽车模型的方式增加模型丰富度。
2. 由于采用了3D引擎渲染技术，因此对硬件系统的显卡性能是比较看重的，所以还需要对该性能方面继续优化，以降低对硬件性能上的消耗。
3. 后续会尽力将该项目发布到线上方便大家在线预览。

项目仓库地址：https://github.com/Lewage59/car-assembly