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

相关文章
|
5月前
|
安全 Java API
Java Web 在线商城项目最新技术实操指南帮助开发者高效完成商城项目开发
本项目基于Spring Boot 3.2与Vue 3构建现代化在线商城,涵盖技术选型、核心功能实现、安全控制与容器化部署,助开发者掌握最新Java Web全栈开发实践。
561 1
|
6月前
|
JavaScript Java 微服务
现代化 Java Web 在线商城项目技术方案与实战开发流程及核心功能实现详解
本项目基于Spring Boot 3与Vue 3构建现代化在线商城系统,采用微服务架构,整合Spring Cloud、Redis、MySQL等技术,涵盖用户认证、商品管理、购物车功能,并支持Docker容器化部署与Kubernetes编排。提供完整CI/CD流程,助力高效开发与扩展。
737 64
|
7月前
|
安全 JavaScript Java
java Web 项目完整案例实操指南包含从搭建到部署的详细步骤及热门长尾关键词解析的实操指南
本项目为一个完整的JavaWeb应用案例,采用Spring Boot 3、Vue 3、MySQL、Redis等最新技术栈,涵盖前后端分离架构设计、RESTful API开发、JWT安全认证、Docker容器化部署等内容,适合掌握企业级Web项目全流程开发与部署。
613 0
|
9月前
|
人工智能 安全 程序员
用 Colab 和 ngrok 免费部署你的 Web UI 项目,随时随地访问!
用 Colab 和 ngrok 免费部署你的 Web UI 项目,随时随地访问!
1116 12
|
缓存 JSON 监控
如何在项目中保证 Web 组件化的性能
保证 Web 组件化的性能需要从多个方面入手,综合运用各种优化方法和策略。通过持续的优化和改进,能够提高组件化的整体性能,为用户提供更好的体验,同时也有助于提高项目的开发效率和质量。
323 64
|
存储 前端开发 JavaScript
如何在项目中高效地进行 Web 组件化开发
高效地进行 Web 组件化开发需要从多个方面入手,通过明确目标、合理规划、规范开发、加强测试等一系列措施,实现组件的高效管理和利用,从而提高项目的整体开发效率和质量,为用户提供更好的体验。
459 63
|
监控 安全 测试技术
如何在实际项目中应用Python Web开发的安全测试知识?
如何在实际项目中应用Python Web开发的安全测试知识?
244 61
|
12月前
|
网络协议 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-优雅草卓伊凡解决方案
827 7
|
安全 Linux 开发工具
零基础构建开源项目OpenIM桌面应用和pc web- Electron篇
OpenIM 为开发者提供开源即时通讯 SDK,作为 Twilio、Sendbird 等云服务的替代方案。借助 OpenIM,开发者可以构建安全可靠的即时通讯应用,如 WeChat、Zoom、Slack 等。 本仓库基于开源版 OpenIM SDK 开发,提供了一款基于 Electron 的即时通讯应用。您可以使用此应用程序作为 OpenIM SDK 的参考实现。本项目同时引用了 @openim/electron-client-sdk 和 @openim/wasm-client-sdk,分别为 Electron 版本和 Web 版本的 SDK,可以同时构建 PC Web 程序和桌面应用(Wi
1006 2
|
中间件 Go API
Go语言中几种流行的Web框架,如Beego、Gin和Echo,分析了它们的特点、性能及适用场景,并讨论了如何根据项目需求、性能要求、团队经验和社区支持等因素选择最合适的框架
本文概述了Go语言中几种流行的Web框架,如Beego、Gin和Echo,分析了它们的特点、性能及适用场景,并讨论了如何根据项目需求、性能要求、团队经验和社区支持等因素选择最合适的框架。
1604 1

热门文章

最新文章