基于WebGL的虚拟太阳系漫游技术实现 ThingJS 科幻片

简介: 3D可视化技术逐渐应用到现代多媒体的课堂教学中。虚拟太阳系是一款天文类的3D可视化应用,它借助3D在线浏览。

三维可视化##3D开发

虚拟功能需求

  1. 太阳系运行需求
  2. 3D模型呈现
  3. ThingJS技术分析
  4. 系统实现步骤
    在这里插入图片描述

3D可视化技术逐渐应用到现代多媒体的课堂教学中。
虚拟太阳系是一款天文类的3D可视化应用,它借助3D在线浏览,模拟了一个“真实”的太阳系,以太阳为中心,八大行星逆时针围绕太阳公转,还有很多卫星绕转在行星或者小天体周围。ThingJS平台在线提供教学演示链接,在中小学生的地理课堂或网上天文馆作为虚拟课程案例使用。
以下是具体需求分析。

一、功能需求

B/S架构为主,通过浏览器在线访问,无需安装任何插件
可观察太阳系中太阳和各行星的3D模型及其运行状况
各行星运行轨道可视化
简单操作键盘鼠标可实现自由漫游
点击太阳或行星时显示该天体的常识信息
随时控制太阳系运行速度
准确度高,基于各项真实太阳系数据及运行制作
运行基本无卡顿,对用户输入实时响应

二、运行需求

要求跨平台、跨终端在线展示,兼容PC电脑、手机、平板电脑等设备。
ThingJS 的 3D 可视化应用是 B/S 架构的,3D 场景是运行在客户端的浏览器中。3D 场景渲染展示对客户端设备要求较高,特别是显卡,一般必须是独立显卡。推荐的客户端配置如下:
(1)客户端
系统:Windows 7 及以上
CPU:双核 CPU2.8GHz及以上
内存:8G 及以上
显卡:最低 GTX650,推荐 GTX960 及以上,显存 2G 及以上
硬盘:300GB 及以上
ThingJS 若是离线部署,需要部署到服务器端,ThingJS 对服务器端的要求并不高。
(2)服务器端
系统:Windows Server 2003 及以上
CPU:双核 CPU2.8GHz 及以上
内存:8G 及以上
硬盘:500GB及以上
软件环境:JDK 1.6 及以上

三、模型呈现

经分析,由于虚拟太阳系的运行功能集中在浏览器端,服务器端只需满足HTTP的静态响应即可,无需动态技术。浏览器端功能可分为模型展示、场景漫游、运行控制三个部分。
在这里插入图片描述

(1)基于webGL技术,ThingJS可以将虚拟太阳系各星体3D模型和脚本运行情况相结合,最终呈现虚拟太阳系的3D可视化效果。
(2)场景漫游是系统借助3D技术中的摄像机控制原理,通过控制鼠标和键盘上的预定按键,以及移动摄像机的位置来实现,同时对应位置控制和视向控制的场景漫游技术。
位置控制。可以控制虚拟漫游者所在点的位置,在技术上就是摄像机的位置由键盘控制,有上下左右四个方向,系统预定WSAD为移动键:W:前进、S:后退、A:左移、D:右移。同时增加鼠标点击操作,即可以通过鼠标的左键进行前进,右键进行后退。
视向控制。可以控制用户看向任意哪个方向,技术上是摄像机的视向(lookAt),由鼠标的移动控制。通过第一人称或第三人称视角进行切换,给用户较强的沉浸感。由于视向容易偏离画布中心,设定空格键为锁定键,完整的一次空格键点击作为视向控制的开关。
(3)运行控制是用户通过界面上的控制面板,对虚拟太阳系的运行速度进行控制。真实的太阳系下,公转周期最短的水星,绕太阳一周需要88天,不便于用户观察,运行控制提供1百万倍于真实运行速度的滑杆操纵,3D场景加入动画、特效,便于用户理解和操作。

四、ThingJS技术分析

ThingJS平台为了Web开发而生,旨在加速3D开发,它与Web浏览器深度整合。ThingJS的所有接口功能都要通过 Javascript调用。当初,WebGL的诞生解决了在浏览器内无插件呈现3D图像的难题;ThingJS则加速了3D专业开发效率,利用可视化开发组件可完成场景搭建、脚本开发、数据对接和项目部署,极大地促进3D可视化技术在应用端普及化。
比起Three.js的开源技术探索者风格,ThingJS是更为顶层的封装库,ThingJS继承了webgl的技术优点,并且提供了较为全面的物联网开发逻辑(如地球、城市、建筑、设备等等)。
在这里插入图片描述

ThingJS开发特点如下:
掩盖了渲染细节。将 webGL原生API的细节抽象化,3D场景拆解为网格、材质和光源。
面向对象。开发者可以使用顶层的 Javascript对象进行编程。
功能丰富。包含了许多实用的内置对象,可以方便地应用于3D动画、高分辨率模型和一些特殊的视觉效果制作。
支持交互。提供了拾取和选择功能,常用鼠标完成一些操作,如变色。
提供数学库。作为数学类辅助功能进行坐标相加等三维运算。
内置文件格式支持。支持3D插件下载3D建模软件如3DMAS导出文本格式的文件,以及CampusBuilder平台的场景文件格式。
扩展性强。可以使用 ThingJS封装自定义的数据结构,进行定制化3D开发。

五、系统实现步骤

ThingJS提供CampusBuider软件搭建3D场景,并在ThingJS平台调用3D源码进行脚本开发,减少了代码开发工作量。ThingJS从管理建模的角度出发,让开发和设计达成良好的协作。况且建模软件如3DSMAX的制作成本过高,并不适合小团队的开发思路。
ThingJS系统工作流程如下图。
在这里插入图片描述

太阳是恒星,其他的行星如金星、木星、水星、火星等,每个行星都有自己的魅力。
行星模型的搭建过程总结如下。
在这里插入图片描述

在太阳系外的背景星空中有着遥远、众多的恒星,反映出来是星星点点的光芒,可以通过粒子系统来实现。ThingJS定义了点在空间中的位置和材质,材质定义了颜色、所绘制单一颜色和尺寸的点。
在这里插入图片描述

基于浏览器端的3D仿真系统在商业、教育等领域将会有广阔的应用前景,ThingJS可视化平台支持智慧教育可视化系统应用发展,利用数字孪生技术将更多培训内容生成虚拟场景,用户理解更加直观、高效。
在这里插入图片描述

相关文章
|
监控 数据可视化 安全
如何使用webgl(three.js)实现煤矿隧道、井下人员定位、掘进面、纵采面可视化解决方案——第十九课(一)
three.js、webgl、3D煤矿隧道、三维井下人员定位、掘进面三维可视化、纵采面可视化、采集面可视化展示、设备检测、数字孪生、物联网3D、3d建筑、3d库房,bim管理系统
300 1
|
3月前
|
开发者 图形学 Java
Unity物理引擎深度揭秘:从刚体碰撞到软体模拟,全面解析实现复杂物理交互的技巧与秘诀,助你打造超真实游戏体验
【8月更文挑战第31天】物理模拟在游戏开发中至关重要,可让虚拟世界更真实。Unity作为强大的跨平台游戏引擎,内置物理系统,支持从刚体碰撞到布料模拟的多种功能。通过添加Rigidbody组件,可实现物体受力和碰撞;使用AddForce()施加力;通过关节(如Fixed Joint)连接刚体以模拟复杂结构。Unity还支持软体物理,如布料和绳索模拟,进一步增强场景丰富度。掌握这些技术,可大幅提升游戏的真实感和玩家体验。
106 0
|
移动开发 前端开发 JavaScript
分享8个前端可以制作360度WebVr全景视图框架
分享8个前端可以制作360度WebVr全景视图框架
1781 0
分享8个前端可以制作360度WebVr全景视图框架
|
存储 固态存储 大数据
医学影像处理系统源码-虚拟内窥镜 三维重建技术
PACS系统与医院HIS实现双向数据交换,自动从HIS系统获得病人基本信息、检查预约请求,自动向HIS系统传送预约请求接受、检查费用发生信息,接受来自HIS系统的检查结果查询和图像数据检索。 医院医学影像PACS系统源码,集成三维影像后处理功能,包括三维多平面重建、三维容积重建、三维表面重建、三维虚拟内窥镜、最大/小密度投影、心脏动脉钙化分析等功能。系统功能强大,代码完整。
|
存储 数据挖掘 开发者
超逼真渲染!虚幻引擎技术大牛解读全局光照系统Lumen(2)
超逼真渲染!虚幻引擎技术大牛解读全局光照系统Lumen
118 0
|
算法 图形学 开发者
超逼真渲染!虚幻引擎技术大牛解读全局光照系统Lumen(1)
超逼真渲染!虚幻引擎技术大牛解读全局光照系统Lumen
175 0
|
存储 缓存 算法
超逼真渲染!虚幻引擎技术大牛解读全局光照系统Lumen(3)
超逼真渲染!虚幻引擎技术大牛解读全局光照系统Lumen
123 0
|
存储 数据挖掘 开发者
超逼真渲染!虚幻引擎技术大牛解读全局光照系统Lumen
超逼真渲染!虚幻引擎技术大牛解读全局光照系统Lumen
119 0
|
前端开发
无处不在的前端矩阵变换(上)
在前端开发中不论CSS3也好,SVG也好,还是Canvas,无论多复杂的图形,都是由一个个点组成的。一个元素渲染后就可以得到一张位图,然后对这个位图上每一点进行变换,就可以得到新的一张位图,从而产生了视觉上的平移translate、旋转rotate、缩放scale、拉伸skew 等效果。这一切都是变换矩阵的功劳。