Web 3D 太空模型展示Web课程期末项目

简介: Web 3D 太空模型展示Web课程期末项目

项目代码:https://download.csdn.net/download/qq_38735017/87426857

1. 基本介绍

14eb71030e278eebfa910ad9557765bd.jpgExplore Space 是⼀款以宇宙空间为主题,应⽤了Web 3D、前端机器学习等新颖 Web 技 术,前后端功能完备的 Web 应⽤。

包括以下两⼤核⼼功能:

  • 适⽤于教学/科普的模型展示场景
  • 基于3D地球的数据可视化


2. 亮点/创新点


  • 基于 JWT 的⽤户认证
  • 基于 Three.js 实现的 Web 3D 场景
  • 基于 Tensorflow.js 实现的前端机器学习模型部署
  • 允许⽤户上传⾃定义数据进⾏可视化(上传⽂件/后端对⽂件进⾏操作)

3. 功能介绍

3.1 注册/登录


fe67c1289126baf19be0ee4d94ff8e73.jpg

基于 JWT 技术进⾏⽤户认证,实现⽤户注册登录功能。

3.2 教学/科普场景展示 借助

Three.js ,基于 Web 3D 技术构建宇宙场景,⽬前可以展示的场景包括:

  • 地球场景
  • 地-⽉系统场景
  • 太阳系场景



fdcf9dfc561c4164cef59cbe6ae37baa.jpg

其中,太阳系场景的场景较为复杂,因此以 太阳系场景 为例,进⾏介绍。

在此场景中,主要实现的功能有:

  • 设置不同星球的公转轨道和公转速度
  • 设置不同星球的⾃转轴偏转⻆度和⾃转速度
  • ⿏标悬停在星球上时,显示该星球名称的 3D ⽂本
  • ⿏标点击星球时,显示该星球相关的⽂本介绍


由于使⽤中⽂渲染3D⽂本时,需要在中⽂字体库中进⾏检索且中⽂字体库⽂件⽐英 ⽂字体库要⼤很多,导致使⽤中⽂渲染3D⽂本响应时间过⻓,性能表现很差,因此 采⽤星球的英⽂名称进⾏3D⽂本渲染。

3.3 基于3D地球的数据可视化


fd80dc708342e0071f62d3c4268e3f81.jpg

基于3D地球模型进⾏数据可视化。该场景下除基本的交互操作外,还⽀持以下功能:


基于⼿部⽬标检测与运动追踪的交互 本项⽬在前端通过 Tensorflow.js 部署了机器学习模型进⾏⼿部识别,通过对⼿部 ⽬标的坐标计算追踪⼿部运动,进⼀步调整3D模型的⽅向,实现交互操作。 每个数据点的x坐标 每个数据点的y坐标 每个数据点的值


上传⾃定义数据 ⽤户除可以浏览默认 "世界⼈⼝统计" 数据外,还可以上传⾃定义数据,数据⽂件格式 要求必须为 CSV 格式⽂件,且符合以下格式(注意第⼀⾏开始就是数据,没有标题 ⾏):


image.png


以 "世界⼤学统计" 数据⽂件为例,展示上传后的可视化结果:


a56aa344e86e4285dfe44dfe7f43786a.jpg


e282074dc407f48f7b3d79585d0e36bb.jpg


4.项⽬架构与技术栈

78da096563d9ac7aff0b2c22a394e76a.png



4.3 API


image.png

相关文章
|
2月前
|
机器学习/深度学习 人工智能 前端开发
机器学习PAI常见问题之web ui 项目启动后页面打不开如何解决
PAI(平台为智能,Platform for Artificial Intelligence)是阿里云提供的一个全面的人工智能开发平台,旨在为开发者提供机器学习、深度学习等人工智能技术的模型训练、优化和部署服务。以下是PAI平台使用中的一些常见问题及其答案汇总,帮助用户解决在使用过程中遇到的问题。
|
2月前
|
安全
网易web安全工程师进阶版课程
《Web安全工程师(进阶)》是由“ i春秋学院联合网易安全部”出品,资深讲师团队通过精炼的教学内容、丰富的实际场景及综合项目实战,帮助学员纵向提升技能,横向拓宽视野,牢靠掌握Web安全工程师核心知识,成为安全领域高精尖人才。 ## 学习地址
23 6
网易web安全工程师进阶版课程
|
3月前
|
存储 开发框架 NoSQL
ASP.NET WEB——项目中Cookie与Session的用法
ASP.NET WEB——项目中Cookie与Session的用法
39 0
|
3月前
|
开发框架 前端开发 .NET
ASP.NET WEB——项目创建与文件上传操作
ASP.NET WEB——项目创建与文件上传操作
48 0
|
4月前
|
Java Maven
IDEA2022如何创建web项目
IDEA2022如何创建web项目
106 0
|
3月前
|
IDE API 开发工具
 鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Web组件
 鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Web组件
47 2
|
4月前
|
前端开发 API Docker
web前端开发项目走proxy代理后端接口,构建发布到生产等环境后,如何修改api接口
web前端开发项目走proxy代理后端接口,构建发布到生产等环境后,如何修改api接口
43 0
|
2月前
|
前端开发 JavaScript 数据管理
描述一个使用Python开发Web应用程序的实际项目经验,包括所使用的框架和技术栈。
使用Flask开发Web应用,结合SQLite、Flask-SQLAlchemy进行数据管理,HTML/CSS/JS(Bootstrap和jQuery)构建前端。通过Flask路由处理用户请求,模块化代码提高可维护性。unittest进行测试,开发阶段用内置服务器,生产环境可选WSGI服务器或容器化部署。实现了用户注册登录和数据管理功能,展示Python Web开发的灵活性和效率。
15 4
|
2月前
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
|
2月前
|
缓存 移动开发 监控
Star 1.3K!推荐一款可以远程调试任意Web项目的开源工具!
Star 1.3K!推荐一款可以远程调试任意Web项目的开源工具!