Posted on 2015-01-28 15:26
TWaver 閱讀(1525)
評論(2) 編輯 收藏
隨著TWaver3D的快速發(fā)展，越來越多的各種功能都在不斷加強，包括性能的極大提升（可以參考這里）,3D編輯器的易用性和功能持續(xù)增強(歡迎大家申請試用),各種特效的增加，特效是本文的主角。
對于UI技術(shù)的不斷發(fā)展和越來越挑剔的用戶，各種特殊的效果已經(jīng)變成了一種必不可少的需求了；或許你正在為客戶提出的需求而苦惱，不過不用擔(dān)心，用TWaver3D正好可以解決這些苦惱。用時下流行的一句話說：有TWaver3D，就是這么任性。
本文要講的是環(huán)境映射。
如果你不理解什么是環(huán)境映射，也沒有關(guān)系，其實你就可以把這個效果想象成現(xiàn)實世界中得鏡子，鏡子可以把周邊的環(huán)境映射出來，而且隨著觀察角度的不同，映射的內(nèi)容也不同。
在TWaver3D中，實現(xiàn)并不難，幾行代碼即可。如下，我們先放一個天空盒，代碼很簡單，用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，并設(shè)置環(huán)境映射
| 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圖片較大，剛開始加載的時候有點卡，請耐心等待)
在實際應(yīng)用中，這種技術(shù)可以實現(xiàn)鏡子，有反射效果的地面，墻面等。
當(dāng)然在很多情況下，真實的物體的表面并不是完全光滑的，而是粗糙的，比如一些建筑物外面的粗糙的毛玻璃等，在TWaver3D里面要實現(xiàn)這種效果，只需要對表面的法線向量加上擾動即可，實現(xiàn)也很簡單，準(zhǔn)備一張擾動的圖，一句代碼即可：
| cube.setStyle('m.normalmap.image','../demo/images/normalmap.png'); |
最終的效果圖:
當(dāng)然，如果你覺得上面的擾動比較大，可以通過下面的參數(shù)調(diào)整：
| cube.setStyle('m.normalScale',new mono.Vec2(0.05,0.05)); |
改動后的效果圖：
最后來個實際例子：
