TWaverGeek
- 浏览: 166852 次
- 性别:
- 来自: 上海
-
最新评论
-
qq_21380041：
954414957@qq.com
HTML5数据可视化第二弹：打造最美3D机房 -
qq_21380041：
楼主，求代码
HTML5数据可视化第二弹：打造最美3D机房 -
luoaz：
楼主能不能传个源码的附件上来， 分享学习下呢？
HTML5+WebGL 3D机房开发实例 -
xiaosi1278：
你好能不能把你讲的源代码发一下！！做参考403541110@q ...
TWaver 3D 编辑器的使用（一）－－－－设计3D场景以及数据绑定 -
TWaverGeek：
BigBird2012 写道您好，您能把您使用TWaver导入 ...
TWaver导入导出AutoCAD DXF图纸
文章列表
互联网购物成了当今非常热门的话题，各种购物网站，手机APP如雨后春笋般涌现出来。什么买衣服，买水果，买米，买油都得到了解决，自从有了这些app，再也不用去超市排着超长的队伍，扛着超重货物，骑着超累的车子了。之 ...
关系网图的呈现方式多种多样，今天我们给大家分享的是和弦式的关系网图，先来看看效果：
例子中我们展示的是各部门员工之间的复杂关系图。在公司内部，不仅部门内部员工之间发生着关系往来，部门和部门之间的员工也在发生这各种往来关系。如果你还是用原先的那种表格来呈现，显然很难直观看出各种关系，用图形化的拓扑呈现就会显得一目了然。好了，我们就来分析一下这张图如何用twaver实现它。首先我们要定义部门的网元，twaver矢量减少了我们很多定制UI的繁琐，我们直接用矢量来描述这个小圆点部分，注意小圆点的颜色需要区分鼠标滑过时的效果，这里我们定义了是否需要高亮的属性：highlighted，代码如下：
t ...
数字图像处理（Digital Image Processing）又称为计算机图像处理，它是指将图像信号转换成数字信号并利用计算机对其进行处理的过程。常用的图像处理方法有图像增强、复原、编码、压缩等，数字图像处理应用领域非常广泛。具体关于数字图像处理的介绍可以参考书籍《冈萨雷斯 数字图像处理》。
TWaver作为可视化的利器，如果在展示网元的时候，融入图像处理技术，将会对网元图标的显示增加了灵活性，是一件非常有意思的事情。那么我们不妨来试试，如何将图像处理技术融入进来。
首先我们重写一个网元CNode，定制用来处理图像的特殊网元。public class CNode extends N ...
大部分拓扑图界面都有显示“分级呈现”的需求。一个复杂的系统或组织，会有很多不同层次的节点和连接关系。如何用图形相对清晰的呈现出来，是一个需要不断探讨的话题。
twaver中有很多的方式可以显示“分级”的先是方法：
1、用Group网元组显示。Group网元组是把一些网元显示在一个组中。这个组可以双击展开、闭合。在闭合状态，它和一个普通的网元节点没什么区别：有位置、有图标、有动作。双击后，默认它会把其内部的孩子显示出来，而自己变成一个覆盖所有孩子的“区域”，形状可能是圆形、方形等。也有人称之为“本地展开”。如下图：
百度公司的ECharts发展迅速，已经成为HTML5 Chart的佼佼者，这让大家骄傲：中国人终于也有世界级的开源通用UI产品了。正如其网站所说，它是百度的，是中国的，也是世界的。想想那些年，我们追逐感慨过的chart产品，fusionchart、highchart等等不计其数，随着HTML5的迅速普及和ECharts的疯狂发展，大家可以忘掉那些产品了。其他商业chart产品基本上也离颤抖中关门的日子不远了。
TWaver各个分支也都有chart模块。虽然它不是核心组件，但是也有和TWaver的MVC框架紧密结合的便利，一些简单的应用场景是完全可以应付的。但和ECharts相比，毫无疑问EC ...
“我不满意，我不想等待，我也不再推诿，我要站出来做一点什么。我要做的事，就在此时，就在此刻，就在此地，就在此生”。自离职央视后，沉寂许久的知名记者、主持人柴静昨日携个人视频新作 《穹顶之下》宣告归来，并在短时间内引起广泛关注。生活在这个地球上，空气质量的好坏决定这我们的健康，每个人都希望能够呼吸新鲜空气，都希望抬起头看到的是蓝天和白云，而不是灰蒙蒙的雾霾。说到雾霾，我们用TWaver GIS实现了一个全国雾霾图的示例供大家参考。
首先要创建地图，如果熟悉TWaver GIS的人，下面的代码应该不难，如果第一次接触TWaver GIS，可以参考html5 gis的官方文档。贴出地图的代码：
...
转眼间春节假期已经过完，作为一个职业的程序猿，不知道大家有没有这样的感觉，一天不碰电脑，总觉得生活少点什么。今天是春节后上班的第三天，给大家分享一下我们前段时间的一个需求，需求是这样的：界面中的网元分为不同的域，比如一级域，二级域，三级域，….N级域，而且不同域之间会有连线。对于这个需求，按照常规的想法，使用group岂不是很简单，一级域是一个group，二级域也是一个group，二级域的group是一级域的父亲，以此类推。但是这样有个问题，如果域比较多，会造成group的过度嵌套，界面中group多了之后，不仅用户体验下降，而且会严重影响性能，所以倒不如直接用树，可以很直观的体现各个域之间的 ...
2015年的春节刚过，苹果、华为、三星就紧锣密鼓的发布了各自新产品。华为、苹果的智能手表最吸引眼球。TWaver也不甘示弱，立刻连夜推出了更像传统奢侈豪华手表的TWaver Watch，予以反击。看来一场腥风血雨的残酷竞争不可避免。下面就带大家先睹TWaver手表的芳容。
和华为一样，TWaver这款腕表也采用了经典的圆形表盘，看上去是一款做工精致的传统腕表。
表盘侧面材质则使用了深受大家喜爱的土豪金。材质纯净、做工整洁光滑，相信一定会闪瞎很多小伙伴的钛合金眼。
随着岁末将至，twaver开发团队依旧马不停蹄，3d产品功能持续更新，新特效和功能目不暇接。现在，我们就利用一些新功能，制作一个全新“赛瓦号”飞船，大家看一下仿真程度是否有质的不同？
网页3d技术正在快速发展，3d可视化技术目前大热，不但是目前整个IT业中的技术热点，也是互联网、投资界的热门话题。各种3d虚拟仿真技术纷纷出现，对twaver这类底层3d展示引擎产品需求量也迅速加大，要求也不断上升。网页3d应用要求开发更加简单方便、效果更加逼真，twaver也在不断满足开发者这一需求。
要让3d场景更加真实，一个核心技术就是处理好“光线”。光线直接将外接实物的各种信息带入眼睛，模拟好光 ...
为了让开发者更方便的对各类3D模型、设备、物体进行浏览和查看，我们直接封装了mono.Viewer组件。它可以直接根据给定的数据源（json、obj、url等）进行数据加载和浏览展示。对于一般的3D设备、图纸、作品的展示，它可是非常 ...
前篇我们介绍了TWaver 3D的环境映射特效，下面我们接着给大家分享高光反射特效。高光反射定义了物体上的某一区域比其他地方更反光。在高光反射的贴图中，黑色区域的反射率为0（完全不反光），白色区域的反射率为100%（完全反光）。这在现实的生活中，也是随处可见，比如一个生锈的物体用低光，而一个抛光的金属应该用高强光；手表上的表盘比表带应该更反光；人的嘴唇应该比皮肤有更强的高光，而皮肤应该比纯棉衣服更反光。加上了这种高光效果后，会是3D物体更加真实，更加生动。接下来我们就来讲解一下如何在一个模型中使用高光反射，比如我们需要创建一个大楼的建筑物。一个cube贴上建筑物的贴图就可以模拟了。我们准备了一 ...
在2014年11月份，我们当时发了一篇有关TWaver HTML5 3D应用于大型数据中心的文章，该blog比较详细的描述一些常用的功能的实现方法，比如：动态添加机柜，告警，温度，湿度等相关的功能的具体实现。其实会用这些东西的话基本上可以使用我们的TWaver HTML5 3D来实现相关的应用了，可是在有些客户觉得这还不够“动态”，都是代码一下生成的，少了一些交互，前些天同事说要不再加点功能，让它更加“动”一些，所以今天我抽了个时间再接着来个“续”——动态的添加机柜，主机和告警。
1、动态的添加机柜，输入机柜ID机柜：
还有半个多月就到春节了，年底相信很多公司都会进行年度总结以及公司发展状况总结，在这过程中难免会用到RoadMap，在这我们也使用TWaver的矢量部分绘制一个Android系统的发展历程。先看效果：什么，最里面Andr
随着TWaver3D的快速发展，越来越多的各种功能都在不断加强，包括性能的极大提升（可以参考这里）,3D编辑器的易用性和功能持续增强(欢迎大家申请试用),各种特效的增加，特效是本文的主角。
对于UI技术的不断发展和越来越挑剔的用户，各种特殊的效果已经变成了一种必不可少的需求了；或许你正在为客户提出的需求而苦恼，不过不用担心，用TWaver3D正好可以解决这些苦恼。用时下流行的一句话说：有TWaver3D，就是这么任性。
本文要讲的是环境映射。
如果你不理解什么是环境映射，也没有关系，其实你就可以把这个效果想象成现实世界中得镜子，镜子可以把周边的环境映射出来，而且随着观察角度的不同，映射 ...
UI和功能是好的产品的两个重要因素，很多产品往往只注重功能上的设计，而忽略了UI。在这个“看脸”的时代，就算产品的功能很强大，如果UI跟不上步伐，你的产品都会在客户心中大打折扣。做安全和监控的项目中经常会进行扫描，一般会用一个gif图片来表示软件正在进行扫描，但是如果想更换这个图标的样式，就需要美工重新做图。TWaver提供了动画效果，如果对图标的动画样式不满意，可以通过简单的更改程序来实现，避免了美工的二次返工，提高了效率。切入正题，看我们怎么实现一个动画的雷达扫描图，首先注册一个图片，用HTML5的canvas画了一个静态的雷达图，如果你熟悉TWaver的话，下边这段代码应该不难。如果不熟 ...