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都增加到场景中，最终的效果如下：

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

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

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

 

最终的效果图:

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

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

 

 改动后的效果图：

最后来个实际例子：