巧用TWaver 3D 矢量图形功能

的确,提起TWaver,大家想到的首先是“电信拓扑图组件”。其实,由于其灵活的MVC架构、矢量化设计、方便定制等特点,TWaver可以做的还有很多。例如房地产行业常见到的“户型图”。

户型推荐是销售接待中很重要的阶段,也被称做是为客户造梦的过程,户型也是客户是否选择该楼盘的一大要素。制作漂亮的户型图在房地产行业无疑是非常重要的一项工作。

首先利用TWaver常被忽视的“矢量图形”功能,来定义房间和隔断的形状。这可以通过代码片段完成、json格式定义完成、或编辑器拖拽完成。一小段代码或json足可以定义任何复杂的矢量形状:

twaver.Util.registerImage(‘room‘, {
    "w": 345,
    "h": 611,
    //....
});

var node = new twaver.Node();
node.setImage(‘room‘);

户型图中,房间内部的很多元素,例如重复纹理、门窗、桌椅、家具等,均可以单独进行矢量化定义。

对于植物等不规则物体,可以混合使用位图进行补充:

this.registerImage(‘plant.png‘);

当然,如果直接使用TWaver提供的矢量化图形设计工具,这一切就变得更加简单了。

最后,希望每一位程序员都有一套属于自己的大房子。下面这套三居室还行么?

时间: 2024-07-31 19:05:16

巧用TWaver 3D 矢量图形功能的相关文章

TWaver 3D作品Viewer查看器

为了让开发者更方便的对各类3D模型.设备.物体进行浏览和查看,我们直接封装了mono.Viewer组件.它可以直接根据给定的数据源(json.obj.url等)进行数据加载和浏览展示.对于一般的3D设备.图纸.作品的展示,它可是非常方便了,一句new mono.Viewer()就解决了所有问题.各种常见的交互设置.灯光设置.呈现方式等,都已经直接封装其中. TWaver的3D viewer直接集成了如下功能: 滚轮缩放 光照设置 热点展示 贴图/线条切换 全屏与恢复 一键分享 viewer通过一

22万个木箱!TWaver 3D极限压榨

打开个门户网站都千呼万唤,我们还能期待网页上的3D技术会有"酣畅淋漓"."一气呵成"的感受吗?也许现在还差点火候.但是HTML5.WebGL等技术一直在飞速的发展,可能很快你就会惊讶它的能力.现在,我们就试试TWaver的3D能显示多少个木箱子,透明的木箱子.数据量当然要大才行,10万个怎么样?干脆试试20万好了,具体说是60的立方矩阵=60x60x60=216000个.只有压榨到极限才能了解WebGL和TWaver 3D技术适合做什么应用. 下面就Let's go

为自己的应用配置3D Touch 功能

随着 iPhone 6s 以及 iPhone 6s Plus 的发布,开发者们现在就可以为自己的应用配备上 3D Touch 功能了,从而给界面交互方式开启一个新的维度. 正如苹果所言,开发者可以通过非常简单的 API 来使用 3D Touch ,从根本上来说,也就是 UITouch 的一个简单的新属性. override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) { guard let touch

iOS 3D Touch功能

新的触摸体验--iOS9的3D Touch 一.引言 在iphone6s问世之后,很多果粉都争先要体验3D Touch给用户带来的额外维度上的交互,这个设计之所以叫做3D Touch,其原理上是增加了一个压力的感触,通过区分轻按和重按来进行不同的用户交互. 二.在模拟器上学习和测试3D Touch 3D Touch 是一个很新颖的设计,可是苹果文档有言: With Xcode 7.0 you must develop on a device that supports 3D Touch. Sim

如何创建TWaver 3D的轮廓选中效果

在一般的游戏中,物体的选中效果会是这样: TWaver 3D中,物体的默认的选中效果一般都是一个方方正正的外框.在HTML5的Mono版本中,TWaver提供了轮廓线样式的选中效果. 通过如下代码把几个基本形状进行捏合,生成新的组合体: 1 var node=new mono.ComboNode(nodes, ops); 2 node.s({ 3     'm.color':'#343AD3', 4     //或使用图片贴图:'m.texture.image':'test.png', 5   

微信成为首批支持iPhone 6s /Plus 上 3D Touch 功能的 App

2015苹果新品发布会上微信成为首批支持iPhone 6s 和 iPhone 6s Plus 上 3D Touch 功能的 App.通过 3D Touch,微信用户将可以通过更精减的操作完成基本任务,包括新建聊天,录制小视频,显示我的二维码或免打扰一小时.用户还可以通过 3D Touch 进行图片缩略图预览:或在聊天页面中启动快速操作菜单,选择标为已读 / 未读,免打扰,置顶或删除. 微信还通过3D Touch推出新功能,让用户可以在发送消息时更改字号或者表情图标的大小.相信微信会给用户带来更多

如何实现TWaver 3D颜色渐变

一般而言,须要实现3D物体的渐变,通常的思路就是通过2D绘制一张渐变canvas图片作为3D对象的贴图.这样的方式是能够解决这类问题的.只是对于一般用户而言,通过2D生成一张渐变的图片.有一定的难度,另外假设要生成的图片比較多.性能效率上会成为一个瓶颈,特别是渐变随着条件在不断变化的情况下.就须要每次绘制的时候都去生成一张渐变的canvas图,效率极其低. 在3D中,第二种通常的方式就是通过顶点色来实现渐变.然而这样的方式对于用户的难度更大,由于须要用户了解3D底层的一些原理,同一时候须要对于每

TWaver 3D应用于大型数据中心(续)

在2014年11月份,我们当时发了一篇有关TWaver HTML5 3D应用于大型数据中心的文章,该blog比较详细的描述一些常用的功能的实现方法,比如:动态添加机柜,告警,温度,湿度等相关的功能的具体实现.其实会用这些东西的话基本上可以使用我们的TWaver HTML5 3D来实现相关的应用了,可是在有些客户觉得这还不够“动态”,都是代码一下生成的,少了一些交互,前些天同事说要不再加点功能,让它更加“动”一些,所以今天我抽了个时间再接着来个“续”——动态的添加机柜,主机和告警.1.动态的添加机

Cocos2d-x 3.3 的3D开发功能介绍

昨天去成都参加GMGDC 全球移动游戏开发者大会,据蓝港互动CEO王峰谈到<手机游戏开发如何走好第一步>时谈到 目前手游公司有10000家,没错,红海,都快变黑海了 这么多公司和产品如何竞争,大量的同质化产品,(王峰给我的建议是与其在红海中厮杀不如想象未来的蓝海在哪,听明白的请举起右手) 先不管这些了,作为程序员来讲我们看到了20万的人才缺口(如果每家公司招20个人,听明白的请举起左手) 今天下载了Cocos2d-x 3.3,3D功能果然强大 主要有以下功能: 1. 基本的Sprite3D使用