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

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

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

一、前言

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

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

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

项目背景

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

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

二、相关技术概述

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

前端技术

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

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

3D汽车模型技术架构.png

相关技术栈:

  • 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中共享使用。

monorepo模式结构.png

相关技术栈:

  • 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关系型数据库存储。

系统架构.png

系统功能模块设计

前台系统功能结构

前台.png

后台系统功能结构

后台功能结构.png

四、系统功能实现

前台系统功能实现

登陆注册界面

4.png

5.png

前台首页

1.png

车型库

2.png

用户中心

7.png

汽车详情

8.png

汽车组装

汽车组装演示.gif

后台系统功能实现

后台数据分析

3.png

用户管理界面

9.png

官方车辆界面

11.png

品牌管理界面

13.png

五、总结与展望

总结

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

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

展望

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

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

项目仓库地址:github.com/Lewage59/ca…

分类:
前端
标签:
分类:
前端
标签: