`

如何创建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     '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则便利多了,基本无需复杂的几何、线代知识,也没有繁琐的外围代码,一两个属性设置一下就可以了。

分享到:
评论

相关推荐

    TWaver的3d图形组件库,小demo

    - "3d":表示3D图形技术,暗示TWaver库支持创建三维视觉效果。 【核心知识点】 1. **TWaver库**:TWaver是一个强大的图表和数据可视化库,提供了丰富的图表类型,包括2D和3D图形。它支持动态数据更新、交互式操作...

    基于TWaver实现的3D机房Demo

    TWaver是一款强大的WebGL3D框架,它为开发者提供了一个高效、灵活的工具,用于创建交互式的3D应用程序,特别是针对网络拓扑和机房管理等场景。本文将深入探讨如何利用TWaver实现3D机房的演示项目。 首先,TWaver的...

    TWaver 3D Flex 3D 实例 例子

    TWaver是一款强大的数据可视化工具,它提供了丰富的图表类型和交互功能,而Flex 3D是Adobe Flex框架的一个扩展,用于创建复杂的三维(3D)图形和用户界面。这个压缩包很可能包含了一系列的示例项目,帮助开发者理解...

    twaver 3D机房接口文档

    ### 3D机房系统接口文档关键知识点 ...通过以上介绍可以看出,《twaver 3D机房接口文档》详细描述了3D机房系统的关键功能模块及其接口设计,旨在帮助开发者更好地理解并利用这些接口来实现机房管理自动化和智能化。

    twaverflex 3D开发文档

    文档开头提到了“TWaver3D for Flex Developer Guide Version 3.0”,这意味着文档是TWaver3D版本3.0的开发者指南,用于指导开发者如何使用TWaver3D进行Flex应用开发。TWaver3D是一个专门针对Adobe Flex开发环境的3D...

    10个TWaver网页3D可视化精彩案例.docx

    1. **3D模型构建:**TWaver利用先进的3D建模技术创建了一个高度逼真的化学元素周期表模型。该模型不仅包括了所有元素的基本信息,如原子序数、元素符号、原子量等,还通过颜色编码区分不同类型的元素,例如金属与非...

    TWaver HTML5 开发指南代码

    TWaver是一个强大的可视化框架,其核心特性是支持复杂的图形和网络图表的绘制,尤其适合在Web上创建交互式的机房、网络设备、服务器架构等展示。 一、TWaver概述 TWaver是一个高效且灵活的JavaScript库,专门用于...

    twaver.js使用示例

    Twaver.js是一款强大的图形化建模和可视化库,主要用于创建复杂的网络拓扑图、流程图、组织结构图等。这个标题暗示我们将深入学习如何在实际项目中使用这个JavaScript库来构建和展示数据模型。 **描述分析:** ...

    twaver-java-4.1

    【标题】"TWaver-java-4.1" 是一个针对Java平台的TWaver最新开发包,旨在帮助开发者创建更加生动且具有吸引力的用户界面。TWaver是一个强大的数据可视化工具,它提供了丰富的图表类型和交互功能,让数据展示更加直观...

    flex Twaver组件使用

    TWaver组件能帮助开发者快速创建高效、专业且美观的图形化界面,提升开发效率,增强软件竞争力。 TWaver组件家族包括TWaver Java、TWaver Web、TWaver Flex、TWaver .NET、TWaver HTML5和TWaver GIS,覆盖了多种...

    twaver-html5-5.9.0-api_html5_-5.9.0-api_twaver_

    同时,了解API文档可以帮助开发者掌握如何利用Twaver提供的类和方法,创建复杂的数据可视化应用,提高开发效率。对于那些想要利用Twaver进行网络分析、状态监控或信息展示的Web开发者来说,这份5.9.0版的API文档是必...

    twaver web实例源码

    同时,它也可能涉及到Twaver的各种特性,如图表类型、图形样式、动画效果等。 【压缩包子文件的文件名称列表】"TwaverWeb"表明压缩包中的主要内容可能是一个名为"TwaverWeb"的项目文件夹,里面可能包含以下部分: ...

    TWaver 源代码下载 案例

    TWaver 源代码下载 3D 机房代码下载 TWaver 编辑器下载

    twaver-flex-3.6.5 官方demo

    - **动画效果**:如何利用Twaver的动画功能实现流畅的视觉过渡。 - **自定义样式**:如何通过CSS或直接设置属性来改变图表的样式和主题。 - **性能优化**:在处理大量数据或复杂图形时,如何优化性能和响应速度。 ...

    TWaver-java-4.1最新 官网试用版jar包及Demo

    【标题】"TWaver-java-4.1最新 官网试用版jar包及Demo" 涉及的核心知识点是TWaver,一个基于Java的图形可视化库,主要用于数据的图表展示和交互。这个版本是4.1,是官方提供的试用版,包含jar包和演示示例。 【描述...

    twaver-java-3.7

    Twaver是一款用于创建动态、交互式图表和网络拓扑图的Java库。它支持多种图表类型,如流程图、网络图、组织结构图等,广泛应用于网络管理、系统监控、业务流程建模等领域。在3.7版本中,开发者可以期待一系列性能...

    Twaver-html5.zip

    Twaver学习案例的例子

    twaver for flex 开发手册

    - **twaver.ISubNetwork**:接口定义了子网络的行为,允许嵌套创建更复杂的网络结构。 - **twaver.Group**:用于组织一组节点,可以作为一个整体进行操作。 - **twaver.ShapeNode**:可以定义具有特定形状的节点...

    TWaver Java 3.7 Developer Guide

    这些组件和框架共同构成了TWaver的核心功能,使开发者能够创建高度定制化的应用程序界面。 ### TWaver结构与组件 #### 图形组件 - **Network组件**:用于展示网络拓扑结构,可以直观表示设备之间的连接关系。 - **...

Global site tag (gtag.js) - Google Analytics