目前在HTML裡(lǐ)實現無插件3D内容呈現的技術就是WebGL，這(zhè)個技術其實并不複雜，但是之前由于缺乏浏覽器的支持而一直沒(méi)能(néng)被(bèi)廣發(fā)使用，這(zhè)一切都(dōu)可能(néng)改變，因爲微軟發(fā)布的IE11已經(jīng)完美支持WebGL，加上Chrome和Firefox，可以說現在是時候在網頁設計裡(lǐ)加入3D元素了。

談到WebGL 3D，大家可能(néng)第一個想到的就是網頁遊戲，但其實WebGL在網頁設計中也大有可爲，我覺得WebGL不僅僅可以運用在大型的全屏體驗中，也完全可以作爲頁面(miàn)元素和其他内容融合在一起(qǐ)，給用戶一種(zhǒng)新奇的酷炫的體驗，我們來看一些例子。

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

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

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

一位法國(guó)的前端設計師和開(kāi)發(fā)者Yann Kozon在他的個人作品網站中也加入WebGL的3D元素。首頁是立體的多面(miàn)體，并随著(zhe)音樂有韻律的上下抖動，進(jìn)入他的作品頁你會發(fā)現左右作品都(dōu)是一個個立體的金字塔，内容和立體效果很好(hǎo)地結合在一起(qǐ)。

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

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

那怎麼(me)在頁面(miàn)中運用3D元素呢？下面(miàn)跟大家介紹三個好(hǎo)用的工具：

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