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