`

TWaver版3D化学元素周期表

阅读更多

很早就有人做3D网页版的化学元素周期表了,酷炫效果和新鲜技巧一度被众多粉丝奉为神明,争相研究和效仿。甚至有人放弃一切扑向这颗蜡烛,不由总是想到那个OPPO广告女主角拽拽的鄙视道:“辞职去旅游!你敢吗?”

俺不敢,不过用TWaver做一个也没用几个小时。所以就老在想:不就旅个游么,至于嘛?

这个3D元素周期表做了一些改进:卡片上增加了汉字及拼音读音,原因你懂得——各位程序猿没几个敢大声读这些汉字的。还好每个字的主要部分还大都认识,多少可以小声蒙一下,加上拼音就少了许多尴尬。另外在形状布局和特效上也丰富了一点,具体可以看下方视频连接。

技术上来说,用TWaver 3D来做的思路略有不同。最开始网上这个程序是使用HTML5、CSS3、WebGL、THREE.js、TWEEN.js等技术做的。使用TWaver就不用这么麻烦了,直接一个mono.js就差不多搞定了。技术上依旧是WebGL+js,但没有使用CSS3和其他框架。效果和效率都很好。

实现上难度不大,大概思路如下:

  1. 用数组定义好化学元素周期表的数据。包括编号、汉字、拼音、数值、英文等等。然后在内存中动态生成每个元素对应的图片卡,并转成base64格式的内存url字符串。注意图片的格式、透明度、颜色等细节;
  2. 为每个化学元素new一个3D立方体,并把内存图片贴图到立方体正面。立方体的厚度0就行了,其他面都透明即可;
  3. 监听鼠标事件。当鼠标over每个物体时,让立方体发光;点击物体时,让立方体动画反转一圈;
  4. 计算好几个形状布局对应的空间坐标,并事先记录到每个立方体的client属性表中。例如:node.setClient(‘grid’,{x:100,y:340});
  5. 放几个按钮,每个按钮点击后,让所有的立方体到对应的形状的位置上去,同时启用动画机制;

实际代码中,也要留意一些注意事项:

  1. 动画:当第一次动画尚未执行完毕,用户又点击其他按钮执行新动画时,需要先判断当前有无正在运行的动画,并及时让动画停止。同时还要判断是否需要把数值恢复成初始值或动画正常结束所设定的值。这里如不仔细处理,可能会导致动画将卡片的位置、角度错乱。
  2. 布局:球形、螺旋、随机等空间点其实都很好计算。尤其球形布局,开始大家可能会去寻找“在一个半径为r的球形表面均匀散布n个点,求每个点的坐标?”这样的题目。这样就把问题复杂化了。因为简单的视觉布局并不需要特别严谨的位置数值,所以大致把球进行径向和横向切片进行数值插入即可;
  3. 贴图:最开始,我们可能会觉得程序是使用了100张小图片进行贴图。但实际上,由于每个卡片的区别仅仅是文字,所以完全可以在内存动态生成。这样速度快节省了网络下载图片的时间以及维护图片的麻烦,同时文字和图片等样式也更容易控制。这也都是HTML5的canvas技术为大家带来的好处。
  4. 物体朝向:在布局过程中,每个卡片的旋转和朝向是一个要考虑的问题。例如球形,每个卡片要面向球形圆心发射线的外方向,螺旋形卡片则朝向水平外方向,等等。计算这些坐标和角度需要很多数学运算,光是求坐标系和直角坐标系转换之类的就够大家忙活一阵子了。而用TWaver就简单了:每个物体直接lookAt一个点就行了。例如球形卡片,每帧动画只要执行:node.lookAt(0,0,0)就行了,对吗?还不完全对。这样lookAt到中心点,不就“屁股”朝外了吗?用户看到的字是卡片的背面,是反的。要解决也简单,应当让它lookAt自己坐标两倍的地方,也就是圆心放射线的外面:node.lookAt(x*2, y*2, z*2),这样就对了。
  5. 发光。鼠标over每个物体,都会看到发光。而鼠标over在光晕位置,却不会触发over事件。这是怎么做到的呢?其实也是小技俩,大家可以看看程序,自己研究吧。

生成内存图片代码片段:

1 var url = canvas.toDataURL("image/png");
2 node.setStyle('front.m.texture.image',url);

球形布局坐标计算代码片段:

1 var radius=1000;
2 var phi = Math.acos( -1 + ( 2 * index ) / total );
3 var theta = Math.sqrt( total * Math.PI ) * phi;
4 var x = radius * Math.cos( theta ) * Math.sin( phi );
5 var y = radius * Math.sin( theta ) * Math.sin( phi );
6 var z = radius * Math.cos( phi );

程序和源代码都已经在TWaver的MONO DESIGN产品中,感兴趣的朋友可以登录在线网址www.mono-design.cn或下载产品包。赶紧试试吧!

 







分享到:
评论

相关推荐

    10个TWaver网页3D可视化精彩案例.docx

    TWaver在化学元素周期表的3D可视化中采用了六种不同的排列方式,不仅展示了化学元素的基本信息,还通过炫酷的动画效果提升了用户的交互体验。这种3D展示方式不仅美观,更能够直观地呈现元素之间的关系。 **详细分析...

    网络编程Netty框架深度解析:NIO核心技术、线程模型与高性能网络应用设计

    内容概要:本文档详细介绍了Netty框架的核心概念、特点、线程模型、序列化协议选择及其实现细节。首先对比了BIO、NIO和AIO的区别,重点阐述了NIO的非阻塞特性及其基于事件驱动的工作原理。接着深入讲解了Netty的高性能表现,包括零拷贝技术、心跳机制、内存管理、流量整形等方面。文档还探讨了Netty的线程模型,包括单线程、多线程和主从多线程模型,并解释了NIOEventLoopGroup的源码实现。此外,文档讨论了TCP粘包/拆包问题及其解决方案,以及常见的序列化协议(如JSON、Protobuf、Thrift等)的特点和适用场景。 适合人群:具备一定网络编程基础,特别是对Java NIO和Netty框架有一定了解的研发人员和技术专家。 使用场景及目标:①理解NIO与传统BIO的区别,掌握NIO的非阻塞特性和事件驱动模型;②深入了解Netty的高性能设计原则,包括零拷贝、心跳检测、内存管理和线程模型;③掌握TCP粘包/拆包的原理及解决方案;④根据具体应用场景选择合适的序列化协议。 阅读建议:本文档内容较为深入,建议读者在阅读过程中结合实际代码和应用场景进行理解。对于Netty的线程模型和序列化协议部分,可以通过实际编程练习加深理解。特别地,理解NIOEventLoopGroup的源码实现需要有一定的Java多线程编程基础。

    美高森美提供的SmartFusion2 SoC FPGA双轴电机控制套件带有模块化电机控制IP集和参考设计.doc

    美高森美提供的SmartFusion2 SoC FPGA双轴电机控制套件带有模块化电机控制IP集和参考设计.doc

    基于三菱FX1S PLC和威纶通触摸屏的双伺服打孔机控制系统开发详解

    内容概要:本文详细介绍了使用三菱FX1S系列PLC和威纶通触摸屏构建双伺服打孔机控制系统的开发过程。主要内容涵盖系统架构、PLC程序设计、触摸屏配置以及开发中常见的注意事项。系统的核心在于通过PLC控制伺服电机完成精确的打孔动作,触摸屏则用于参数设置和运行监控。文中还讨论了伺服电机的参数配置、循环控制逻辑、MODBUS通信配置、界面设计及实时数据更新等方面的内容。此外,作者分享了一些实际开发中的经验和教训,如伺服电机的过冲和欠冲问题、程序稳定性的保障措施以及触摸屏响应速度的优化。 适合人群:从事自动化控制领域的工程师和技术人员,尤其是对PLC编程和伺服控制有一定基础的人群。 使用场景及目标:适用于需要高精度定位和控制的工业应用场景,如钣金加工车间。目标是帮助读者掌握双伺服打孔机的开发流程,提高系统的稳定性和效率。 其他说明:文中提到的技术细节和实践经验对于理解和解决类似项目的难题非常有帮助。建议读者在实践中结合具体情况进行调整和优化。

    太远市-小店区-街道行政区划_140105_Shp数据-wgs84坐标系 (1).rar

    街道级行政区划shp矢量数据,wgs84坐标系,下载直接使用

    乌兰察布市-乌兰察布市-街道行政区划_150900_Shp数据-wgs84坐标系.rar

    街道级行政区划shp矢量数据,wgs84坐标系,下载直接使用

    呼伦贝尔市-满洲里市-街道行政区划_150781_Shp数据-wgs84坐标系.rar

    呼伦贝尔市-满洲里市-街道行政区划_150781_Shp数据-wgs84坐标系.rar

    临汾市-尧都区-街道行政区划_141002_Shp数据-wgs84坐标系.rar

    街道级行政区划shp矢量数据,wgs84坐标系,下载直接使用

    Java基于springboot+vue的资产管理系统源码+数据库(高分项目)

    Java基于springboot+vue的资产管理系统源码+数据库(高分项目),个人经导师指导并认可通过的高分设计项目,评审分99分,代码完整确保可以运行,小白也可以亲自搞定,主要针对计算机相关专业的正在做大作业的学生和需要项目实战练习的学习者,可作为毕业设计、课程设计、期末大作业。 Java基于springboot+vue的资产管理系统源码+数据库(高分项目)Java基于springboot+vue的资产管理系统源码+数据库(高分项目)Java基于springboot+vue的资产管理系统源码+数据库(高分项目)Java基于springboot+vue的资产管理系统源码+数据库(高分项目)Java基于springboot+vue的资产管理系统源码+数据库(高分项目)Java基于springboot+vue的资产管理系统源码+数据库(高分项目)Java基于springboot+vue的资产管理系统源码+数据库(高分项目)Java基于springboot+vue的资产管理系统源码+数据库(高分项目)Java基于springboot+vue的资产管理系统源码+数据库(高分项目)Java基于springboot+vue的资产管理系统源码+数据库(高分项目)Java基于springboot+vue的资产管理系统源码+数据库(高分项目)Java基于springboot+vue的资产管理系统源码+数据库(高分项目)Java基于springboot+vue的资产管理系统源码+数据库(高分项目)Java基于springboot+vue的资产管理系统源码+数据库(高分项目)Java基于springboot+vue的资产管理系统源码+数据库(高分项目)Java基于springboot+vue的资产管理系统源码+数据库(高分项目)Java基于springboot+vue的资产管理系统源码+数据

    吕梁市-吕梁市-街道行政区划_141100_Shp数据-wgs84坐标系.rar

    街道级行政区划shp矢量数据,wgs84坐标系,下载直接使用

    邢台市-巨鹿县--街道行政区划_130529_Shp-wgs84坐标系.rar

    街道级行政区划shp数据,wgs84坐标系,直接下载使用。

    石家庄市-石家庄市-石家庄市-石家庄市-街道行政区划_130100_Shp数据wgs84坐标系.rar

    街道级行政区划shp数据,wgs84坐标系,直接下载使用。

    北京市-昌平区-街道行政区_110114_shp-wgs84坐标系.rar

    街道级行政区划shp数据,wgs84坐标系,直接使用。

    朔州市-朔城区-街道行政区划_140602_Shp数据-wgs84坐标系.rar

    街道级行政区划shp矢量数据,wgs84坐标系,下载直接使用

    石家庄市-石家庄市-石家庄市-行唐县-街道行政区划_130125_Shp数据wgs84坐标系.rar

    街道级行政区划shp数据,wgs84坐标系,直接下载使用。

    鄂尔多斯市-乌审旗-街道行政区划_150626_Shp数据-wgs84坐标系.rar

    鄂尔多斯市-乌审旗-街道行政区划_150626_Shp数据-wgs84坐标系.rar

    Thinkphp蓝色大气的响应式轻量级通用后台,采用Bootstrap3制作,自带权限管理功能

    适用范围:Thinkphp蓝色响应式后台源码 系统设置、导航管理、配置管理、上传管理、用户管理、功能模块和插件管理 源码开发语言:PHP+MYSQL 源码描述说明: thinkphp蓝色大气的响应式后台模板,常用的后台功能有:系统设置、导航管理、配置管理、上传管理、用户管理、功能模块和插件管理等。

    大同市-云冈区-街道行政区划_140214_Shp数据-wgs84坐标系.rar

    大同市-云冈区-街道行政区划_140214_Shp数据-wgs84坐标系.rar

    脑机接口基于FBCCA算法与贝叶斯优化的SSVEP分类器设计及优化:含高斯过程优化完整代码实现与性能分析如何在FBCCA

    内容概要:本文详细介绍了在FBCCA算法中应用贝叶斯优化的完整代码实现,基于高斯过程优化,代码可直接运行。首先配置环境,安装所需的Python库如scikit-optimize、scipy、numpy、torch等。核心实现部分包括数据生成模块,通过SSVEPGenerator类生成带谐波的SSVEP信号FBCCABayes分类器模块,定义了滤波器组的动态创建、CCA相关系数的计算,并实现了贝叶斯优化过程。最后,通过贝叶斯优化执行模块,对FBCCABayes分类器的关键参数(滤波器阶数、频带宽度、CCA权重系数)进行优化,输出最佳参数组合及最高验证准确率,并对优化过程进行可视化展示,包括收敛曲线和参数影响热力图。 适合人群:有一定机器学习基础,特别是熟悉Python编程和贝叶斯优化理论的研究人员或工程师。 使用场景及目标:①理解FBCCA算法的工作原理及其在脑机接口领域的应用;②掌握贝叶斯优化在调参中的具体应用,提高模型性能;③学习如何将理论知识转化为实际可运行的代码,并通过可视化工具直观地展示优化效果。 其他说明:代码已在Python 3.10 + CUDA 11.8/CPU环境下验证通过,安装指定版本依赖后可直接运行。建议读者在实践中调整参数设置,探索不同配置下的模型表现。

    GD32F407VET6单片机实验程序源代码1.GPIO输出驱动LED与GD32F4的Keil5软件Pack

    GD32F407VET6单片机实验程序1.GPIO输出驱动LED与GD32F4的Keil5软件Pack

Global site tag (gtag.js) - Google Analytics