- 浏览: 165294 次
- 性别:
- 来自: 上海
最新评论
-
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图纸
文章列表
以下网页3D案例均为TWaver原创出品,推荐使用Chrome, FireFox, Safari等对WebGL支持良好的浏览器运行。案例排名不分先后,如需Demo,可直接申请试用。
1、化学元素周期表
六种排列方式,炫酷动画效果,TWaver 3D轻松实现。
演示地址:http://demo.servasoft.com/chemical-table/
2、DNA螺旋图
DNA3D模型,包含几千个球体(几十万个面),高性能渲染,搭配丰富色彩和光照效果,可用于医疗三维可视化。
演示地址:http://demo.servasoft ...
前言
最近忙着给客户折腾一个复杂的多层嵌套关系。客户一句话“要好看!”,哥就忙白了头啊,还好最终搞定了。
需求描述
先简单描述下这次客户的需求。
现实应用中,网络拓扑图结构可能很简单,也可能非常复杂。
比如这种节点较多的单层拓扑:
稍复杂一些的:
再复杂一些的:
在这些拓扑图中常见的场景是,很多网络节点需要组成一组,这常被称为“网元组”。一般来说,网元组会有一个形状,双击可以展开/闭合。如下图:
这次客户的需求中,最大的难点就是需要有五层网元组的嵌套,五层同时展开时,要求清晰美观。常规的分组形状有圆形、矩形、平行 ...
俗话说,有人的地方就有江湖,江湖就是帮派林立错综复杂的关系网。今天我们就来展示这样一个小小的江湖。
故事背景
崇祯末年,民不聊生,烽烟四起……
江湖都是有背景的,我们的3D江湖也需要一个背景。江湖就是一个舞台,舞台就要有空间、场地、灯光和观众。在我们的3D舞台中,box就是空间,容纳所有物体;network就是场地,展示千姿百态;PointLight和AmbientLight就是灯光,让画面更立体鲜亮;Camera就是观众,没有观众戏就永远不会开场。下面就看看这个江湖是个怎样的背景:
var box = new mono.DataBox();
var ...
这样一簇绚烂丰满艳丽多姿的3D小球花,要多少代码才能完成?其实不足百行,您信吗?下面咱就看一下具体实现过程,让您分分钟学会用TWaver HTML5制作3D拓扑图。
搭建3D空间
首先为花簇的绽放建一个展示的舞台。接触过TWaver2D的都知道,box、network是必不可少的,但对3D场景来说,还远远不够。一是要添加镜头位置,确定我们在什么角度和距离进行观察;二是要加上灯光,否则再美的画面也看不见。灯光分为点光源和环境光,一般来说要一个环境光和若干点光源搭配才能出来好的效果。
var box = new mono.DataBox();
var network= ne ...
TWaver 3D发布也有很长一段时间了,相关的应用和项目也做了不少,特别是3D机房,可是有些用户反馈说3D机房开发起来有些费劲,耗时,3D并不像2D,虽然有时更加的直观,但是需要考虑的问题还挺多的,模型、材质、效率,交互,以及视角等等。 比如:一个机柜有可能有许许多多个3D对象组成,因此要对其进行操作,例如:打开机柜门,添加或删除设备,查看某个设备时让其他的设备都虚化掉等类似功能,对于很多人来说实现起来十分复杂。今天我们给大家介绍一些新的功能,我们对相关功能进行了进一步的封装,并且提供了一些内置模型,而这块的功能我们还在进一步的改进中,在这里先给大家展示展示,如果各位有什么好的想法和建 ...
在我们协助客户进行3D应用的开发过程中,客户遇到的最头疼的问题是如何在短时间内学会使用TWaver 3D引擎,以及使用TWaver 3D来创建和导入项目所需的各种3D业务模型。由于项目涵盖的行业繁多、对模型种类和精度的需求各异,为了降低TWaver底层引擎的使用难度,TWaver发布了一款全新的模型库框架TWaver® Make,来帮助开发者快速创建高质量、专业的行业可视化应用场景。
简单来说,TWaver® Make提供的是模版定义的开发SDK框架,和高质量的跨行业模型库。使用TWaver® Make,可以把TWaver 2D/3D的代码细节包装在模版中进行复用,极大的降低使用TWa ...
前阵子写了一篇HMTL5 3D机房开发的例子http://twaver.iteye.com/blog/2215863,介绍了如何用html5在网页上创建无插件的精美3d机房场景,收到很多朋友的鼓励,深表感谢。对于索要源代码的朋友,已经尽力邮件回复。由于精力所限,如未 ...
最近项目开发任务告一段落,刚好有时间整理这大半年的一些成果。使用html5时间还不久,对js的认识还不够深入。没办法,以前一直搞java,对js的一些语言特性和概念一时还转换不过来。
上一篇第一弹介绍了项目中做的一个彩虹爆炸图,主要用了 html5的canvas的2d绘制技术。这一回我想介绍一下项目中的一个亮点技术:html5的3D,以及如何用它打造精美的3D机房监控系统。
目标效果图
下图是领导给找的一张的效果参考图,客户希望机房至少能达到下面的3D效果。懂的人都知道,这可是一张设计公司出的装修效果图啊,就算是用max建模,也需要大量
VR技术在数据中心3D机房中的应用 (下)
前面给大家简单科普了一下VR的硬件设备以及VR在各个领域的应用,是不是觉得非常高大上?千言万语概括成一句话,VR能给用户带来前所未有的沉浸感和交互方式,让人足不出户就能 ...
VR技术在数据中心3D机房中的应用(上)
前两天跟朋友A吃饭,吃着吃着就说到了VR。近几年来,VR技术越来越火,感觉能跟VR沾点边的都特别高大上,朋友A也是,一提到
前言
最近特别忙,承蒙大伙关照,3D机房的项目一个接着一个,领了一帮小弟,搞搞传帮带……有个小弟很不错,勤奋好学,很快就把API都摸透了,自己折腾着做了个HTML5的魔都的地铁线路图,能拖能拽的,还和电子地图做 ...
天津港爆炸事件后,除了安置群众、追究事故责任外,人们最关心的莫过于爆炸污染物对于周边环境的影响,其中最重要的一块就是饮用水的安全。所幸的是,水源的安全监测是实实在在有据可依的。环保单位和供水企业在建设 ...
忙完3D,最近又开始用HTML5给客户开发网管界面。这次客户的需求很明确,要把一个关系很复杂的多层嵌套网络拓扑图做得尽可能美观和清晰。现实应用中,网络拓扑图结构可能很简单,也可能非常复杂,比如这种节点较多的单层拓扑:
稍复杂一些的:
再复杂一些的:
在这些拓扑图中常见的场景是,很多网络节点需要组成一组,这常被称为“网元组”。一般来说,网元组会有一个形状,双击可以展开/闭合。例如下图中的像如下:
这次客户的需求中,最大的难点就是需要有五层网元组的嵌套,五层同时展开时,要求清晰美观。常规的分组形状有圆形、矩形、平行四边形等,无论哪种形状,分组多了后,就会产生审美疲劳 ...
前言
25年过去了,Brooks博士著名的“没有银弹”的论断依旧没有被打破。HTML5也是一样。但这并不妨碍HTML5是一个越来越有威力的“炸蛋”:发展迅速、势不可挡。随着HTML5技术的普及,用HTML5做可视化呈现的项目越来越多了。HTML5的优势明显:网页上直接运行无需插件、手机平板方便兼容、代码开发和维护相对容易,等等。一大波一大波的做Java、.NET甚至C++桌面的程序老手们都纷纷开始研究javascript了,而初出茅庐的新一代程序猿更是义无反顾的直奔HTML5这个技术大热点而来。
HTML5涵盖的技术点很多,甚至延伸到了前端、后端、通讯等各个层面。前端的can ...
组织结构图(Organization chart)是企业的流程运转、部门设置及职能规划等最基本的结构依据。和客户交流时,不少人都提到需要一个灵活的工具来绘制呈现企业的组织架构,今天就给大家带来一款用TWaver实现的组织结构图,提供多种布局方式,为了清晰呈现组织里每个人的职能,我们定制了名片样式来展示网元。首先来看下整体的效果,是上下布局的样式:
也可以调整为圆形布局:
这些布局用twaver来实现是非常的合适,实现起来也是很容易,twaver内部就提供了多种布局方式:自左向右,从下向上,具体可以看twaver的官方文档介绍。这里就不多说了,今天我们着重说一下twaver如果实 ...