`

TWaver3D特效系列之环境映射

阅读更多

随着TWaver3D的快速发展,越来越多的各种功能都在不断加强,包括性能的极大提升(可以参考这里),3D编辑器的易用性和功能持续增强(欢迎大家申请试用),各种特效的增加,特效是本文的主角。

对于UI技术的不断发展和越来越挑剔的用户,各种特殊的效果已经变成了一种必不可少的需求了;或许你正在为客户提出的需求而苦恼,不过不用担心,用TWaver3D正好可以解决这些苦恼。
用时下流行的一句话说:有TWaver3D,就是这么任性。

本文要讲的是环境映射。

如果你不理解什么是环境映射,也没有关系,其实你就可以把这个效果想象成现实世界中得镜子,镜子可以把周边的环境映射出来,而且随着观察角度的不同,映射的内容也不同。

在TWaver3D中,实现并不难,几行代码即可。如下,我们先放一个天空盒,代码很简单,用cube加六张贴图即可:

var skybox = new mono.Cube(5000,5000,5000);
skybox.setStyle('m.side','back');
skybox.setStyle('m.texture.image',['./images/posx.jpg','./images/negx.jpg','./images/posy.jpg','./images/negy.jpg','./images/posz.jpg','./images/negz.jpg']);

 

然后在天空盒里面增加一个小的cube,并设置环境映射

var cube = new mono.Cube(200, 200, 200);
cube.setStyle('m.envmap.image',['./images/posx.jpg','./images/negx.jpg','./images/posy.jpg','./images/negy.jpg','./images/posz.jpg','./images/negz.jpg']);

 

把skybox和cube都增加到场景中,最终的效果如下:

twaver_envmap_1
(gif图片较大,刚开始加载的时候有点卡,请耐心等待)
在实际应用中,这种技术可以实现镜子,有反射效果的地面,墙面等。

当然在很多情况下,真实的物体的表面并不是完全光滑的,而是粗糙的,比如一些建筑物外面的粗糙的毛玻璃等,在TWaver3D里面要实现这种效果,只需要对表面的法线向量加上扰动即可,实现也很简单,准备一张扰动的图,一句代码即可:

cube.setStyle('m.normalmap.image','../demo/images/normalmap.png');

 

最终的效果图:

twaver_envmap_2

当然,如果你觉得上面的扰动比较大,可以通过下面的参数调整:

  cube.setStyle('m.normalScale',new mono.Vec2(0.05,0.05));

 

 改动后的效果图:

twaver_envmap_3

最后来个实际例子:
twaver-skybox-glass-building

分享到:
评论

相关推荐

    基于TWaver实现的3D机房Demo

    【基于TWaver实现的3D机房Demo】 在IT行业中,3D可视化技术正在逐步渗透到各个领域,尤其是在数据中心管理方面。TWaver是一款强大的WebGL3D框架,它为开发者提供了一个高效、灵活的工具,用于创建交互式的3D应用...

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

    4. **3D图形组件**:TWaver提供的3D图形组件包括但不限于3D图表(如3D柱状图、3D饼图)、3D网络图、3D空间布局等,可用于数据可视化和复杂的场景模拟。 5. **基本代码示例**:压缩包中的"twaver"文件可能包含一个或...

    TWaver 3D Flex 3D 实例 例子

    这个压缩包很可能包含了一系列的示例项目,帮助开发者理解和学习如何在Flex 3D环境中集成和操作TWaver 3D。 描述中同样重申了这是TWaver 3D在Flex 3D平台上的实例和例子,这意味着我们将看到实际的代码、配置文件和...

    twaver 3D机房接口文档

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

    twaverflex 3D开发文档

    TWaver3D是一个专门针对Adobe Flex开发环境的3D图形软件开发包(SDK)。 ### 2. 开发环境要求 文档提到使用Flex Builder 4.6作为开发工具,这是Adobe公司发布的一款集成开发环境(IDE),专门用于Flex应用开发。因此,...

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

    2. **环境监控:**对于数据中心而言,TWaver的3D小机房案例提供了一种高效监控环境参数的方式,如温度、湿度等,确保设备正常运行。 综上所述,TWaver通过其强大的3D可视化技术,在多个领域展现出了广泛的应用前景...

    twaver.js使用示例

    ”这说明提供的示例不仅包含核心的twaver.js库,还有与之配合的HTML文件“alarm.html”。Jetty是一个轻量级的Java Web服务器和Servlet容器,能够方便地运行Web应用程序。这意味着用户可以直接在Jetty环境下运行这个...

    TWaver图形界面之道

    TWaver不仅仅是一系列可视化的组件集合,其背后有一套统一的数据模型支撑,这是TWaver的核心之一。 - **DataBox**:TWaver的核心数据容器,负责管理图形元素及其数据。在不同的编程环境中,DataBox有不同的实现形式...

    TWaver HTML5 开发指南代码

    TWaver提供了一系列的API和组件,使得开发者可以方便地创建拓扑视图,包括但不限于网络拓扑、服务器架构拓扑等。这些工具能够清晰地展示设备间的连接关系,支持拖放、缩放、平移等交互功能,便于用户理解和管理复杂...

    flex Twaver组件使用

    在配置TWaver Flex的开发环境时,首先需要创建一个MXML应用项目,如"HelloTWaver",并将TWaver.swc库文件放入项目的libs目录。Flex Builder 3会自动将此库文件包含进编译路径。用户还可以通过项目设置的Flex Build ...

    Twaver 3.7性能测试报告

    为了全面评估Twaver Java的性能,测试团队设计了一系列实验方案,并对不同的测试场景进行了细致的规划。主要包括以下几点: 1. **无连接节点测试**:通过创建单个节点但不建立任何链接的方式,评估Twaver Java在此...

    twaver-html5-5.9.0-api_html5_-5.9.0-api_twaver_

    通过这些文件,开发者可以学习如何在HTML5环境中集成Twaver,创建交互式的可视化界面,包括添加图形元素、处理用户交互、响应事件、定制样式和布局等。同时,了解API文档可以帮助开发者掌握如何利用Twaver提供的类和...

    TWaver 源代码下载 案例

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

    twaver for flex 开发手册

    TWaver for Flex 是一款由 Serva Software 开发的高级图形组件库,它为 Flex 应用程序提供了一系列丰富的图形控件和服务。这些控件允许开发者在 Flex 应用程序中轻松实现复杂的网络拓扑图、表格、树形结构等图形界面...

    Twaver-html5.zip

    Twaver学习案例的例子

    TWaver文档

    - TWaver包含了一系列功能丰富的组件,例如属性表、树状结构、表格、告警等,这些组件可以帮助用户更有效地组织和展现数据。 - 特别值得注意的是TWaver的**网络拓扑**组件,它能够以图形的方式展示网络中的各种设备...

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

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

    twaver-java-4.1

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

    TWaver HTML5 Developer Guide

    在开发环境搭建部分,文档将引导开发者配置TWaver HTML5的运行环境,确保开发者能够顺利使用TWaver HTML5组件进行开发。 在快速上手章节中,文档将介绍一些约定俗成的开发惯例,帮助开发者快速熟悉TWaver HTML5的...

    twaver web实例源码

    【描述】"twaver web结合extjs源码学习资料"意味着这个压缩包包含了一组实际项目的源代码,用于展示如何在Web环境中整合Twaver和ExtJS。通过学习这些源码,开发者可以深入了解这两个库如何协同工作,创建交互式和...

Global site tag (gtag.js) - Google Analytics