twaver html5 api,TWaver版3D化学元素周期表
很早就有人做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 );
程序和源代码都已经在TWaver的MONO DESIGN产品中,感兴趣的朋友可以登录在线网址www.mono-design.cn或下载产品包。赶紧试试吧!
原文:http://www.cnblogs.com/twaver/p/3842177.html
twaver html5 api,TWaver版3D化学元素周期表相关推荐
- TWaver版3D化学元素周期表
很早就有人做3D网页版的化学元素周期表了,酷炫效果和新鲜技巧一度被众多粉丝奉为神明,争相研究和效仿.甚至有人放弃一切扑向这颗蜡烛,不由总是想到那个OPPO广告女主角拽拽的鄙视道:"辞职去旅游 ...
- js绘制超炫酷3D化学元素周期表
化学元素周期表(Periodic table of elements)是根据原子量从小至大排序的化学元素列表.列表大体呈长方形,某些元素周期中留有空格,使特性相近的元素归在同一族中,如碱金属元素.碱土 ...
- html5 百度地图api文档,开发指南--百度地图JavaScript API大众版.doc
开发指南--百度地图JavaScriptAPI大众版开发指南--百度地图JavaScriptAPI大众版 简介 JavaScript API大众版 JavaScript API功能介绍 百度地图Jav ...
- TWaver HTML5 on Microsoft Surface RT
2019独角兽企业重金招聘Python工程师标准>>> 公司新入了一台Surface RT(64G,高配啊,再看看我那乞丐版的IPad2,内牛满面...),测试了下TWaver HT ...
- TWaver HTML5 + Node.js + express + socket.io + redis(六)
接上一篇TWaver HTML5 + Node.js + express + socket.io + redis(五), 这一篇将讲解如何用模版生成html页面, 如何验证用户登录, 您将了解到: 1 ...
- TWaver html5 + NodeJS + express + websocket.io + redis 快速搭建项目(一)
最近看到TWaver 的html5版本即将发布了,于是今天用TWaver HTML5 + NodeJS + express + websocket.io + redis搭建了一个简单原型.先发出几张效 ...
- TWaver HTML5 + Node.js + express + socket.io + redis(五)
接上一回TWaver HTML5 + Node.js + express + socket.io + redis(四), 这一篇您将了解到 1. 如何保存更改后的拓扑数据 (包括新增的, 修改的, 删 ...
- twaver html5软件价格,TWaver HTML5 (2D)----数据元素
概述 数据元素是数据模型的基本要素,用于描述图形网元,业务网元,或者纯数据.TWaver HTML5中所有数据元素都继承自twaver.Data.为不同功能的需求,预定义了三类数据类型:twaver. ...
- asp 退出登录修改cookie能进入后台_Vue3.0 - Composition API 体验版开发后台管理系统...
手把手撸码前端,实战大公司级后台管理系统开发,正规实践了解项目开发整体流程 由0到1搭建后台管理系统,采用 Vue3.0 - Composition API 体验版开发,优先体验3.0 API 语法: ...
- 3分钟开发一个冰冰版 3D 音乐播放器,是什么样的体验
: 一个对开发技术特别执着的程序员,对移动开发有着独到的见解和深入的研究,有着多年的iOS.Android.HTML5开发经验,对NativeApp.HybridApp.WebApp开发有着独到的见解 ...
最新文章
- abstract interface 和 interface 没有区别
- 前端学习(1884)vue之电商管理系统电商系统之实现侧边栏的折叠和展开
- 三星s9php禁用列表,ADB禁用列表
- node-media-server win环境安装架测试 踩坑记
- postgresql interval 字段拼接
- Web API-基本认知
- 短视频新媒体运营策划推广工作计划表模板
- Axure8.0汉化包+注册码
- Altium Designer 18安装方法
- Redis桌面管理器下载
- bp神经网络python源代码_python构建bp神经网络_曲线拟合(一个隐藏层)__2.代码实现...
- 轻量级的双向绑定工具 —— ukulelejs
- 手机数据线种类有哪些
- 力扣146题 LRU 缓存机制
- Android传感器Motion Sensor开发实验
- VAR.P和VAR.S
- 深度学习基本模型浅析
- Intel MediaSDK sample_decode 官方GPU解码流程学习(二) - 在双显卡机器上实现DirectX11 D3D11和OpenCL共享资源
- firefox firbug 的“阻挡” blocking
- 带宽-服务器测速(Speedtest)