基于 webGL 的元素周期表 3D 交互展示

【基于 webGL 的元素周期表 3D 交互展示】的更多相关文章

基于 webGL 的元素周期表 3D 交互展示

前言之前在网上看到别人写的有关元素周期表的文章,深深的勾起了一波回忆,记忆里初中时期背的“氢氦锂铍硼,碳氮氧氟氖,钠镁铝硅磷,硫氯氩钾钙”.“养(氧)龟(硅)铝铁盖(钙),哪(钠)家(钾)没(镁)青(氢)菜(钛)”,高中时期记的质量守恒.元素守恒.原子守恒.电子守恒,时间过的飞快,转眼我们都已经这么大了... 现在我用 HT 来实现它,HT 有 2D 拓扑和 3D 模型场景,两种形式我都实现了,话不多说,先看效果图. 界面展示整个页面由 HT UI 组件构成,使用 ht.ui.TabLayo…

一个基于WebGL的仿真3D水池有逼真的水波纹效果

最近在研究WebGL,看到国外很多高手做的很多超炫的3D效果,无比羡慕.忍不住把效果趴下来研究,下面介绍一个逼真的游泳池中浮动小球的效果.效果非常绚丽,功能强大.示例可切换观察水池的视角,不同视角考虑到了光线从不同角度折射和反射的影响,所以波纹效果极其逼真. 先介绍下WebGL WebGL是一种3D绘图标准,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提…

基于WebGL架构的3D可视化平台ThingJS-搭建设备管理系统

国内高层建筑不断兴建,它的特点是高度高.层数多.体量大.面积可达几万平方米到几十万平方米.这些建筑都是一个个庞然大物,高高的耸立在地面上,这是它的外观,而随之带来的内部的建筑设备也是大量的.为了提高设备利用率,合理地使用能源,加强对建筑设备状态的监视等,自然地就提出了楼宇自动化控制系统.下面我们将用ThingJS平台来模拟一个设备管理系统. 第一步,利用CampusBuilder搭建模拟场景.CampusBuilder的模型库有各种各样的模型,使我们搭建出的场景更逼真.使用CampusBuild…

基于WebGL架构的3D可视化平台—设备管理

---恢复内容开始--- 国内高层建筑不断兴建,它的特点是高度高.层数多.体量大.面积可达几万平方米到几十万平方米.这些建筑都是一个个庞然大物,高高的耸立在地面上,这是它的外观,而随之带来的内部的建筑设备也是大量的.为了提高设备利用率,合理地使用能源,加强对建筑设备状态的监视等,自然地就提出了楼宇自动化控制系统.下面我们将用ThingJS平台来模拟一个设备管理系统. 第一步,利用CampusBuilder搭建模拟场景.CampusBuilder的模型库有各种各样的模型,使我们搭建出的场景更逼真.…

基于WebGL架构的3D可视化平台—新风系统演示

新风系统是根据在密闭的室内一侧用专用设备向室内送新风,再从另一侧由专用设备向室外排出,在室内会形成“新风流动场”,从而满足室内新风换气的需要.实施方案是:采用高风压.大流量风机.依靠机械强力由一侧向室内送风,由另一侧用专门设计的排风风机向室外排出的方式强迫在系统内形成新风流动场.在送风的同时对进入室内的空气进过滤.消毒.杀菌.增氧.预热(冬天). 接下来就用ThingJs平台来搭建一个新风系统第一步,利用CampusBuilder搭建模拟场景.CampusBuilder的模型库有各种各样的模型…

基于WebGL架构的3D可视化平台—实现小车行走路线演示

小车行走路线演示New VS Old 刚接触ThingJS的时候,写的一个小车开进小区的演示,今天又看了教程中有movePath这个方法就重新写了一遍,其中也遇到了一些问题,尤其突出的问题就是小车过弯的尴尬表现. 先给大家看看Old版本,Old版演示地址. 再看看New版本,AE86过弯不再笨拙顺畅无比,New版演示地址. 第二张效果图上可以看到由点连起来的路线,我的AE86也是严格按照路线行进的,相比于Old版本过弯的时候舒畅多了.Old版本是用setTimout(),rotateY(),mo…