目前在HTML里實現(xiàn)無插件3D內(nèi)容呈現(xiàn)的技術(shù)就是WebGL，這個技術(shù)其實并不復(fù)雜，但是之前由于缺乏瀏覽器的支持而一直沒能被廣發(fā)使用，這一切都可能改變，因為微軟發(fā)布的IE11已經(jīng)完美支持WebGL，加上Chrome和Firefox，可以說現(xiàn)在是時候在網(wǎng)頁設(shè)計里加入3D元素了。

談到WebGL 3D，大家可能第一個想到的就是網(wǎng)頁游戲，但其實WebGL在網(wǎng)頁設(shè)計中也大有可為，我覺得WebGL不僅僅可以運(yùn)用在大型的全屏體驗中，也完全可以作為頁面元素和其他內(nèi)容融合在一起，給用戶一種新奇的酷炫的體驗，我們來看一些例子。

11月底微軟IE和亞洲動物基金組織合作的公益網(wǎng)站”月熊志”就采用了WebGL的技術(shù)，來宣傳IE11在這方面的渲染能力。

這個由三本”書”組成的體驗，第一本書的第一頁就給大家呈現(xiàn)了一個3D的月熊世界，IE創(chuàng)造了一只動態(tài)的3D熊，用戶可以拖動、旋轉(zhuǎn)這個3D模型來了解更多關(guān)于這只熊的信息。這個3D的場景生動有趣，一草一木活靈活現(xiàn)，熊那股可愛勁兒也通過動作栩栩如生地反映出來，除了WebGL技術(shù)，很難通過別的方法實現(xiàn)這樣的交互效果。
《網(wǎng)站建設(shè)、域名解析、網(wǎng)頁設(shè)計首選先誠科技。。。》
微軟IE推出的另外一個WebGL體驗，和紅牛（RedBull）合作的網(wǎng)站Rampage對WebGL的運(yùn)用也相當(dāng)新穎。這是紅牛每年都舉辦的極限單車比賽，網(wǎng)站通過3D WebGL技術(shù)再現(xiàn)了比賽環(huán)境，用戶可以通過拖動或者點擊3D環(huán)境上的節(jié)點來控制比賽視頻的播放。網(wǎng)站不僅僅利用WebGL，也運(yùn)用了很多CSS 3D Transform來讓一些2D元素?fù)碛辛Ⅲw的效果，比如視頻。

下面這個網(wǎng)站設(shè)計也很好的結(jié)合了WebGL，網(wǎng)頁設(shè)計師Steven Wittens在他的博客里加入了抽象的3D管道所組成的元素，當(dāng)你打開網(wǎng)頁的時候，這些管道會自動交織在一起，形成ACKO幾個字母的形狀。你還可點擊右上方那個播放按鈕來看管道的延伸過程。網(wǎng)頁上的博文內(nèi)容和3D的空間很好地結(jié)合在一起，充分展現(xiàn)了作者強(qiáng)大的設(shè)計開發(fā)能力。

一位法國的前端設(shè)計師和開發(fā)者Yann Kozon在他的個人作品網(wǎng)站中也加入WebGL的3D元素。首頁是立體的多面體，并隨著音樂有韻律的上下抖動，進(jìn)入他的作品頁你會發(fā)現(xiàn)左右作品都是一個個立體的金字塔，內(nèi)容和立體效果很好地結(jié)合在一起。

為了說明3D元素怎樣結(jié)合到平時的靜態(tài)頁面中，Web設(shè)計師GUILLAUME LECOLLINET（他的網(wǎng)站：http://littleworkshop.fr）做了一個WebGL的demo頁面。頁面上呈現(xiàn)了3個東西：第一個HTML5盾牌，鼠標(biāo)懸停會進(jìn)行翻轉(zhuǎn)；第二個框線球會有落下彈起的重力效果；第三個就是美元符號，會跟隨鼠標(biāo)懸停位置呈現(xiàn)不一樣角度的陰影。從這個demo當(dāng)中我們可以看到簡單的3D效果完全可以讓頁面變得生動有趣。
glecollinet

(建議采用IE11或者Chrome查看）

那怎么在頁面中運(yùn)用3D元素呢？下面跟大家介紹三個好用的工具：

1. Three.js （http://threejs.org）。2. Blender （http://www.blender.org）。3. Voodoojs （http://www.voodoojs.com）