标签:mic 汉字 空间 lap www 随机 sof 等等 编号
非常早就有人做3D网页版的化学元素周期表了。酷炫效果和新奇技巧一度被众多粉丝奉为神明,争相研究和效仿。甚至有人放弃一切扑向这颗蜡烛。不由总是想到那个OPPO广告女主角拽拽的歧视道:“辞职去旅游。你敢吗?”
俺不敢,只是用TWaver做一个也没用几个小时。所以就老在想:不就旅个游么,至于嘛?
这个3D元素周期表做了一些改进:卡片上添加了汉字及拼音读音。原因你懂得——各位程序员没几个敢大声读这些汉字的。
还好每一个字的主要部分还大都认识,多少能够小声蒙一下。加上拼音就少了很多尴尬。另外在形状布局和特效上也丰富了一点,详细能够看下方视频连接。
技术上来说,用TWaver 3D来做的思路略有不同。最開始网上这个程序是使用HTML5、CSS3、WebGL、THREE.js、TWEEN.js等技术做的。
使用TWaver就不用这么麻烦了。直接一个mono.js就差点儿相同搞定了。技术上依然是WebGL+js,但没有使用CSS3和其它框架。
效果和效率都非常好。
实现上难度不大,大概思路例如以下:
注意图片的格式、透明度、颜色等细节。
比如:node.setClient(‘grid’,{x:100,y:340});
实际代码中,也要留意一些注意事项:
这样就把问题复杂化了。由于简单的视觉布局并不须要特别严谨的位置数值,所以大致把球进行径向和横向切片进行数值插入即可;
但实际上,由于每一个卡片的差别不过文字。所以全然能够在内存动态生成。这样速度快节省了网络下载图片的时间以及维护图片的麻烦。同一时候文字和图片等样式也更easy控制。这也都是HTML5的canvas技术为大家带来的优点。
比如球形。每一个卡片要面向球形圆心发射线的外方向,螺旋形卡片则朝向水平外方向,等等。计算这些坐标和角度须要非常多数学运算,光是求坐标系和直角坐标系转换之类的就够大家忙活一阵子了。
而用TWaver就简单了:每一个物体直接lookAt一个点即可了。比如球形卡片。每帧动画只要运行:node.lookAt(0,0,0)即可了,对吗?还不全然对。这样lookAt到中心点,不就“屁股”朝外了吗?用户看到的字是卡片的背面,是反的。
要解决也简单,应当让它lookAt自己坐标两倍的地方,也就是圆心放射线的外面:node.lookAt(x*2, y*2, z*2)。这样就对了。
而鼠标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或下载产品包。赶紧试试吧!
标签:mic 汉字 空间 lap www 随机 sof 等等 编号
原文地址:http://www.cnblogs.com/mthoutai/p/7337286.html