TWaver - 专注UI技术

http://twaver.servasoft.com/
posts - 171, comments - 191, trackbacks - 0, articles - 2
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

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

Posted on 2014-11-03 10:31 TWaver 阅读(5956) 评论(1)  编辑  收藏

在一般的游戏中,物体的选中效果会是这样:

TWaver 3D中,物体的默认的选中效果一般都是一个方方正正的外框。在HTML5的Mono版本中,TWaver提供了轮廓线样式的选中效果。

通过如下代码把几个基本形状进行捏合,生成新的组合体:

1var node=new mono.ComboNode(nodes, ops);
2node.s({
3    'm.color':'#343AD3',
4    //或使用图片贴图:'m.texture.image':'test.png',
5    'm.type':'phong',
6    'm.specularStrength':10,
7    'select.style':'outline.normal',
8    'select.width':1,
9});

轮廓‘select.style’支持’outline.normal’ 和‘outline.wireframe’的两种方式,区别是’outline.normal’的轮廓线宽度会随着缩放而缩放,而’outline.wireframe’的轮廓线宽不会随着缩放而缩放,保持固定线宽,用户可以根据需求选中不同的方式。

实现这种边缘轮廓效果,一般的思路有模板缓冲+高斯模糊、模板缓冲+wireframe方式、模板缓冲+顶点normal延伸, 都需要多次渲染来实现相关效果。但使用TWaver的Mono则便利多了,基本无需复杂的几何、线代知识,也没有繁琐的外围代码,一两个属性设置一下就可以了。


评论

# re: 如何创建TWaver 3D的轮廓选中效果  回复  更多评论   

2014-11-05 14:09 by 宁波装修网
TWaver的操作确实简单,学习了!

只有注册用户登录后才能发表评论。


网站导航: