首页 > 其他好文 > 详细

TWaver版3D化学元素周期表

时间：2014-07-14 11:06:43 阅读：411 评论：0 收藏：0 [点我收藏+]

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

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

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

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

实现上难度不大，大概思路如下：

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

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

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