项目代码:https://download.csdn.net/download/qq_38735017/87426857
1. 基本介绍
Explore Space 是⼀款以宇宙空间为主题,应⽤了Web 3D、前端机器学习等新颖 Web 技 术,前后端功能完备的 Web 应⽤。
包括以下两⼤核⼼功能:
- 适⽤于教学/科普的模型展示场景
- 基于3D地球的数据可视化
2. 亮点/创新点
- 基于 JWT 的⽤户认证
- 基于 Three.js 实现的 Web 3D 场景
- 基于 Tensorflow.js 实现的前端机器学习模型部署
- 允许⽤户上传⾃定义数据进⾏可视化(上传⽂件/后端对⽂件进⾏操作)
3. 功能介绍
3.1 注册/登录
基于 JWT 技术进⾏⽤户认证,实现⽤户注册登录功能。
3.2 教学/科普场景展示 借助
Three.js ,基于 Web 3D 技术构建宇宙场景,⽬前可以展示的场景包括:
- 地球场景
- 地-⽉系统场景
- 太阳系场景
其中,太阳系场景的场景较为复杂,因此以 太阳系场景 为例,进⾏介绍。
在此场景中,主要实现的功能有:
- 设置不同星球的公转轨道和公转速度
- 设置不同星球的⾃转轴偏转⻆度和⾃转速度
- ⿏标悬停在星球上时,显示该星球名称的 3D ⽂本
- ⿏标点击星球时,显示该星球相关的⽂本介绍
由于使⽤中⽂渲染3D⽂本时,需要在中⽂字体库中进⾏检索且中⽂字体库⽂件⽐英 ⽂字体库要⼤很多,导致使⽤中⽂渲染3D⽂本响应时间过⻓,性能表现很差,因此 采⽤星球的英⽂名称进⾏3D⽂本渲染。
3.3 基于3D地球的数据可视化
基于3D地球模型进⾏数据可视化。该场景下除基本的交互操作外,还⽀持以下功能:
基于⼿部⽬标检测与运动追踪的交互 本项⽬在前端通过 Tensorflow.js 部署了机器学习模型进⾏⼿部识别,通过对⼿部 ⽬标的坐标计算追踪⼿部运动,进⼀步调整3D模型的⽅向,实现交互操作。 每个数据点的x坐标 每个数据点的y坐标 每个数据点的值
上传⾃定义数据 ⽤户除可以浏览默认 "世界⼈⼝统计" 数据外,还可以上传⾃定义数据,数据⽂件格式 要求必须为 CSV 格式⽂件,且符合以下格式(注意第⼀⾏开始就是数据,没有标题 ⾏):
以 "世界⼤学统计" 数据⽂件为例,展示上传后的可视化结果:
4.项⽬架构与技术栈
4.3 API