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

相关文章
|
7天前
|
网络协议 Java Shell
java spring 项目若依框架启动失败,启动不了服务提示端口8080占用escription: Web server failed to start. Port 8080 was already in use. Action: Identify and stop the process that’s listening on port 8080 or configure this application to listen on another port-优雅草卓伊凡解决方案
java spring 项目若依框架启动失败,启动不了服务提示端口8080占用escription: Web server failed to start. Port 8080 was already in use. Action: Identify and stop the process that’s listening on port 8080 or configure this application to listen on another port-优雅草卓伊凡解决方案
31 7
|
3月前
|
监控 安全 测试技术
如何在实际项目中应用Python Web开发的安全测试知识?
如何在实际项目中应用Python Web开发的安全测试知识?
118 61
|
3月前
|
缓存 JSON 监控
如何在项目中保证 Web 组件化的性能
保证 Web 组件化的性能需要从多个方面入手,综合运用各种优化方法和策略。通过持续的优化和改进,能够提高组件化的整体性能,为用户提供更好的体验,同时也有助于提高项目的开发效率和质量。
60 8
|
3月前
|
存储 前端开发 JavaScript
如何在项目中高效地进行 Web 组件化开发
高效地进行 Web 组件化开发需要从多个方面入手,通过明确目标、合理规划、规范开发、加强测试等一系列措施,实现组件的高效管理和利用,从而提高项目的整体开发效率和质量,为用户提供更好的体验。
54 7
|
3月前
|
中间件 Go API
Go语言中几种流行的Web框架,如Beego、Gin和Echo,分析了它们的特点、性能及适用场景,并讨论了如何根据项目需求、性能要求、团队经验和社区支持等因素选择最合适的框架
本文概述了Go语言中几种流行的Web框架,如Beego、Gin和Echo,分析了它们的特点、性能及适用场景,并讨论了如何根据项目需求、性能要求、团队经验和社区支持等因素选择最合适的框架。
220 1
|
3月前
|
JavaScript 前端开发 开发工具
web项目规范配置(husky、eslint、lint-staged、commit)
通过上述配置,可以确保在Web项目开发过程中自动进行代码质量检查和规范化提交。Husky、ESLint、lint-staged和Commitlint共同作用,使得每次提交代码之前都会自动检查代码风格和语法问题,防止不符合规范的代码进入代码库。这不仅提高了代码质量,还保证了团队协作中的一致性。希望这些配置指南能帮助你建立高效的开发流程。
108 5
|
4月前
|
JavaScript API 开发工具
(H5-Web3D-ThreeJS)在网页三维CAD中绘制窗户模型
本文介绍了如何使用mxcad3d在网页中创建一个简单的三维窗户模型。通过官方教程搭建环境,编写绘制窗户模型的代码,并在点击按钮后展示模型效果。最终模型包括窗框和玻璃部分,具备丰富的三维建模功能和便捷的API支持。
|
3月前
|
JavaScript 前端开发 数据安全/隐私保护
Web开发者必看:手把手教你如何轻松播放m3u8流地址,解锁视频播放新技能,让你的项目更上一层楼!
【10月更文挑战第23天】随着互联网技术的发展,m3u8格式因良好的兼容性和高压缩率被广泛用于网络流媒体传输。本文介绍如何在Web端播放m3u8流地址,包括引入视频播放器(如Video.js)、创建播放器容器、初始化播放器及播放m3u8流的具体步骤。此外,还涉及处理加密m3u8流的示例。
765 1
|
4月前
|
JSON 搜索推荐 API
Python的web框架有哪些?小项目比较推荐哪个?
【10月更文挑战第15天】Python的web框架有哪些?小项目比较推荐哪个?
116 1
|
4月前
|
机器学习/深度学习 监控 数据挖掘
基于Django和百度飞桨模型的情感识别Web系统
基于Django和百度飞桨模型的情感识别Web系统
71 5

热门文章

最新文章