TWaver版3D化学元素周期表

Posted 2020-10-02 mthoutai

非常早就有人做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. 放几个button。每一个button点击后，让全部的立方体到相应的形状的位置上去，同一时候启用动画机制；

实际代码中，也要留意一些注意事项：

1. 动画：当第一次动画尚未运行完成，用户又点击其它button运行新动画时。须要先推断当前有无正在运行的动画，并及时让动画停止。同一时候还要推断是否须要把数值恢复成初始值或动画正常结束所设定的值。这里如不细致处理，可能会导致动画将卡片的位置、角度错乱。

2. 布局：球形、螺旋、随机等空间点事实上都非常好计算。尤其球形布局，開始大家可能会去寻找“在一个半径为r的球形表面均匀散布n个点，求每一个点的坐标？”这种题目。

   这样就把问题复杂化了。由于简单的视觉布局并不须要特别严谨的位置数值，所以大致把球进行径向和横向切片进行数值插入即可；

3. 贴图：最開始。我们可能会认为程序是使用了100张小图片进行贴图。

   但实际上，由于每一个卡片的差别不过文字。所以全然能够在内存动态生成。这样速度快节省了网络下载图片的时间以及维护图片的麻烦。同一时候文字和图片等样式也更easy控制。这也都是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或下载产品包。赶紧试试吧！