目前在HTML裡(lǐ)實現(xiàn)無插件(♦±$♥jiàn)3D內(nèi)容呈現(xiàn)的(de)技(jì)術(shù)就(ji↑♦©©ù)是(shì)WebGL，這(zhè)個(gè)技(jì)術(shù)其實并不(bù)複雜(z• á)，但(dàn)是(shì)之前由于缺乏¥δ"'浏覽器(qì)的(de)支持而一(yī)直沒能(néng)被廣發使用(yòng)，這(zhè)一(↕§★®yī)切都(dōu)可(kě)能(néng)改變，因為≠✔©(wèi)微(wēi)軟發布的(de)IE∏∞11已經完美(měi)支持WebGL，加上(shàng)Chrome和(hé)•≠​≠Firefox，可(kě)以說(shuō)現(xià¶&n)在是(shì)時(shí)候在網頁設計(jì)裡(lǐ)加入3D元素了(le•$)。

談到(dào)WebGL 3D，大(dà)家(jiā)可(kě)能(néng)第一(yī)個✔©(gè)想到(dào)的(de)就(jiù)是(shì)網頁遊戲，但(dàn)其實Wγ•ebGL在網頁設計(jì)中也(yě)大(β™≈dà)有(yǒu)可(kě)為(wèi)，我覺得(d★¶←↓e)WebGL不(bù)僅僅可(kě)以運用(yòng)在大(¶‍dà)型的(de)全屏體(tǐ)驗中，也(yě)完全可(kě)以作(zuò)為(wèiδ←≤)頁面元素和(hé)其他(tā)內(nèi)容©'融合在一(yī)起，給用(yòng)戶一(yī)種新♦☆•&奇的(de)酷炫的(de)體(tǐ)驗，我們來(lái)看(kàn)一(yī)些(xiē)☆≥™例子(zǐ)。

11月(yuè)底微(wēi)軟IE和(hé)亞洲動物(wù)基金(jīβ"¶n)組織合作(zuò)的(de)公益網站(z₽≤☆hàn)”月(yuè)熊志(zhì)”就(jiù)采用(yò✘'≈♦ng)了(le)WebGL的(de)技(jì)術(shù)，來(lái>φ)宣傳IE11在這(zhè)方面的(de)渲染能(néng)力。

這(zhè)個(gè)由三本”書(shū)”組成的(de)體(tǐ)驗，第一(↑ 'βyī)本書(shū)的(de)第一(yī)頁就( ÷α>jiù)給大(dà)家(jiā)呈現(xiàn)了(le)一(y >ī)個(gè)3D的(de)月(yuè)熊世界，IE創造了(le)一(y>α↕ī)隻動态的(de)3D熊，用(yòng)戶可(kě)以拖動、旋轉這(z≤​hè)個(gè)3D模型來(lái)了(l≤Ωe)解更多(duō)關于這(zhè)隻熊的(de)信息。這(zhè)個(gè)3D的(de)場≠‍‌✔(chǎng)景生(shēng)動有(yǒu)趣，一(yī)草(cσ©ǎo)一(yī)木(mù)活靈活現(xiàn)，熊那(nà)股↑‌÷可(kě)愛(ài)勁兒(ér)也(yě)通(tōng)過動作(zuò)栩栩如×π​♠(rú)生(shēng)地(dì)反映出來(lái)，除了(le)WebGL技(jì)術(shù&™Ω®)，很(hěn)難通(tōng)過别的(de)方法實現(xiàn)這(zhè)♣<樣的(de)交互效果。
《網站(zhàn)建設、域名解析、網頁設計(jì)首選先誠科(kē)技(jì)‍δ ε。。。》
微(wēi)軟IE推出的(de)另外(wài)一(yī)個(g♣β​↔è)WebGL體(tǐ)驗，和(hé)紅(hóng)牛（Re σdBull）合作(zuò)的(de)網站(zhàn)Rampage對(duì)WebGL的←‌ (de)運用(yòng)也(yě)相(xiàng)當新穎。這(zhè)是(shì)紅(hóngφ≠§±)牛每年(nián)都(dōu)舉辦的(de)極限單車(chē)比賽，網站(zhàn)♥Ω'δ通(tōng)過3D WebGL技(jì)術(shù)再現(xiàn)了(le)比<α±☆賽環境，用(yòng)戶可(kě)以通(tōng)過拖動或≠♦ 者點擊3D環境上(shàng)的(de)節點來(lái)控制(zhì)比賽λπΩ視(shì)頻(pín)的(de)播放(fàng)。網站(zhàn)不(bù)僅僅利用(₹±yòng)WebGL，也(yě)運用(yòng)了(le)&$★很(hěn)多(duō)CSS 3D Transform來(lái)讓一(yī)些(β→♥xiē)2D元素擁有(yǒu)立體(tǐ)的(de)效果，比如(rú)視(shì)頻(pín)。

下(xià)面這(zhè)個(gè)網站(zhàn)設計(jì)也(yě)很(hěn)好(★↑hǎo)的(de)結合了(le)WebGL，網頁設計(jì®±)師(shī)Steven Wittens在他(tā)的(de)博客裡(lǐ)✔δ加入了(le)抽象的(de)3D管道(dào)所組成的(de)元素，當你(nǐ)打開(kāi) §£→網頁的(de)時(shí)候，這(zhè)些(xiē)管道(dào)會(huì)自(zì)動交β≠↓×織在一(yī)起，形成ACKO幾個(gè)字母的(de)形αλ↕‌狀。你(nǐ)還(hái)可(kě)點擊右上(shàng)方那(nà)個(≤&£₽gè)播放(fàng)按鈕來(lái)看(kàn)管道(dào)≠↑的(de)延伸過程。網頁上(shàng)的(de)博文(wén)內(nèi)容和(⧱↓hé)3D的(de)空(kōng)間(jiā↔←​n)很(hěn)好(hǎo)地(dì)結合在&​₹≥一(yī)起，充分(fēn)展現(xiàn)了(le)作(zuò)者→≤強大(dà)的(de)設計(jì)開(kāi)發能(nén£↕" g)力。

一(yī)位法國(guó)的(de)前端設計(jì)師(shīα §​)和(hé)開(kāi)發者Yann Kozon在他(δ≈&↓tā)的(de)個(gè)人(rén)作(zuò)品網站(zhàn)中也(y™©ě)加入WebGL的(de)3D元素。首頁®≈γ是(shì)立體(tǐ)的(de)多(duō)面體(tǐ)，并随著(zhe)音(yīn)樂(yuè♣σΩ®)有(yǒu)韻律的(de)上(shàng)下(xià)抖動，£×進入他(tā)的(de)作(zuò)品頁你(nǐ)會(huì)• σ發現(xiàn)左右作(zuò)品都(dōu)是(shì)一(yī)個(gè)個(gè)立體♣±(tǐ)的(de)金(jīn)字塔，內(nèi)容和(hé)立體(tǐ)效果很(hě↑>÷n)好(hǎo)地(dì)結合在一(yī)起。

為(wèi)了(le)說(shuō)明( ↓$míng)3D元素怎樣結合到(dào)平時(shíγ•₩♥)的(de)靜(jìng)态頁面中，Web設計(jì)師(shī)GUILLAUME‍¶✔ LECOLLINET（他(tā)的(de)網站(zhàn)：http://littlew>↑​orkshop.fr）做(zuò)了(le)一(yī)個(gè)‌ &∞WebGL的(de)demo頁面。頁面上(shàng)呈現(xiàn)了(le)£¥σ≈3個(gè)東(dōng)西(xī)：第一(yīβ ₽")個(gè)HTML5盾牌，鼠标懸停會(huì)進行(x↓&πíng)翻轉；第二個(gè)框線球會(huì)有(yǒu)落下(xià)彈起的(de)重力↑↔效果；第三個(gè)就(jiù)是(shì)美(měi)≥ ♦σ元符号，會(huì)跟随鼠标懸停位置呈現(xiàn)不(bù)一÷✘×(yī)樣角度的(de)陰影(yǐng)。從(cóng)這‌♥π(zhè)個(gè)demo當中我們可(k ​ě)以看(kàn)到(dào)簡單的(de)3D效果完全可(kě↕±€)以讓頁面變得(de)生(shēng)動有(yǒu)趣。
glecollinet

(建議(yì)采用(yòng)IE11或者Chrome查看(kàn)）

那(nà)怎麽在頁面中運用(yòng)3D元素呢(ne)？下(x×"ià)面跟大(dà)家(jiā)介紹三個(gè)好(hǎo)用₩★φ©(yòng)的(de)工(gōng)具：

1. Three.js （http://threejs.org）。2. Blen‍ ‌♣der （http://www.blender.org）。3. Voodoojs （®↕ http://www.voodoojs.com）