1.06日(rì)音(yīn)訊,3D頁面效果成主流♠ ，這(zhè)麽多(duō)年(nián)以來(lái)，網頁似乎都(dō ↕♦u)停留在2D的(de)世界。2012年(nián)末開(k<↔'āi)始到(dào)整個(gè)2013年(nián)，湧現(xiàn↔α÷)出非常多(duō)采用(yòng)CSS3D變>•£形和(hé)Parallax（視(shì)覺差， ₽↑☆通(tōng)過鼠标滑動讓網頁上(shàng)不(bù)同層次的(de>•)內(nèi)容以不(bù)同的(de)速率位移而形成一(↕®γyī)種層次感）效果的(de)網站(zhàn)，讓這(zhè)個♣✔≤↔(gè)2D的(de)網絡世界出現(xiàn)了(le)豐富的(de)•↕層次和(hé)縱深感。但(dàn)是(shì)真正的( $de)3D（除了(le)flash實現(xiàn)的(♣∏♦de)）似乎沒有(yǒu)成為(wèi)網頁設計(jì)師(shī)的(deε"")工(gōng)具，不(bù)過這(zhè)種情況應該會(huì)在♦≈∏2014年(nián)有(yǒu)所改變。
目前在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)IE11已經完美(měi)支持WebG∑ €"L，加上(shàng)Chrome和(hé)Firefox，可(kě)™≤以說(shuō)現(xiàn)在是(shì)時(shí)候在網頁設×→×計(jì)裡(lǐ)加入3D元素了(le)。™↑£
談到(dào)WebGL3D，大(dà)家(jiā)可(kě)能(n↑★÷éng)第一(yī)個(gè)想到(dào)的∏£÷(de)就(jiù)是(shì)網頁遊戲，但(dàn)其實WebGφ₩L在網頁設計(jì)中也(yě)大(dà)有(y←☆®ǒu)可(kě)為(wèi)，我覺得(de)↔β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ò)的(d©λ₹'e)公益網站(zhàn)”月(yuè)熊志(zhì)∏”就(jiù)采用(yòng)了(le)WebGL的(de♣♣σ↑)技(jì)術(shù)，來(lái)宣傳IE11 ♣在這(zhè)方面的(de)渲染能(néng)力↔♥÷±。
這(zhè)個(gè)由三本”書(shū)&r∞ ✘dquo;組成的(de)體(tǐ)驗，第一(yī)本書(shū)的 ↓φ∞(de)第一(yī)頁就(jiù)給大(dà)家(jiā)≥✔≈≠呈現(xiàn)了(le)一(yī)個(gè)3D的(de)月(yuèα©∑)熊世界，IE創造了(le)一(yī)隻動态的(dλ∑♠e)3D熊，用(yòng)戶可(kě)以拖動、旋轉®$這(zhè)個(gè)3D模型來(lái)了(le)解更多(duō)關于這(z♥∏hè)隻熊的(de)信息。這(zhè)個(gè)3D的(de)場(c✘•hǎ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)交互效果。
moonbear
微(wēi)軟IE推出的(de)另外(wài)一(yī)個★☆↓ (gè)WebGL體(tǐ)驗，和(hé±↔λ)紅(hóng)牛（RedBull）合作(δ←"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)過3DWebGLβ↑技(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ō)CSS3DTransform來(✔σ☆lái)讓一(yī)些(xiē)2D元素擁有(y ∑ǒu)立體(tǐ)的(de)效果，比如(rú)§♥φ視(shì)頻(pín)。
rampage
下(xià)面這(zhè)個(gè)網站(zhàn)設計(jì)也↕↑(yě)很(hěn)好(hǎo)的(de)結合了(le)WebGL，網¶♥頁設計(jì)師(shī)StevenWittens在→≤>他(tā)的(de)博客裡(lǐ)加入了(le)抽象的(d★Ω§ e)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)的(d→™βe)博文(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éng)力。§←
acko
一(yī)位法國(guó)的(de)前端設計(jìπ₽βπ)師(shī)和(hé)開(kāi)發者YannKozon↔₩在他(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àn₽↕g)下(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ī)起。
yannkozon
為(wèi)了(le)說(shuō)明(→míng)3D元素怎樣結合到(dào)平時(sλ¶∑hí)的(de)靜(jìng)态頁面中，Web設計(j☆±ì)師(shī)做(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ǐn₽γφ₹g)。從(cóng)這(zhè)個(gè)demo當中我們☆♠>可(kě)以看(kàn)到(dào)簡單的↓(de)3D效果完全可(kě)以讓頁面變εγ★ 得(de)生(shēng)動有(yǒu)趣。
試想一(yī)下(xià)，我們現(→♠>xiàn)在很(hěn)多(duō)網頁的(de)Logo都(dōu)是(∑→★shì)圖片，但(dàn)是(shì)如(rú)果帶有(yǒu)一(yī®•)些(xiē)3D的(de)效果，一(yī)定會(huì)特别有(yǒu)φ✔意思。可(kě)能(néng)你(nǐ)會(huì)問(wèn)，這(zhè)¶₹♦σ能(néng)給用(yòng)戶帶來(lái)多(duō)大(∞≤dà)價值呢(ne)？可(kě)能(néng)實用(yòng)性上(shàn♠&↔±g)确實沒有(yǒu)多(duō)少(shǎo)，但(dàn)很(hěn™✘€→)多(duō)時(shí)候，我們也(yě)要(yào)討(tǎo)用€™ (yòng)戶歡心，讓用(yòng)戶展現(xi™™∞àn)笑(xiào)容，所謂的(de)”delight&rdqu★≤ ↕o;的(de)作(zuò)用(yòng)，增加用(yòng₩♠$™)戶好(hǎo)感度。同時(shí)，這(zhè)也(yě)可(♥σ¥↕kě)以展現(xiàn)一(yī)個(gè)網頁的( ♠≥£de)性格和(hé)技(jì)術(shù)的(de)前瞻性，這(zhè)方面>Ω←€是(shì)設計(jì)師(shī)和(hé)開(kāi)發者₹₩★需要(yào)好(hǎo)好(hǎo)考慮§ 的(de)。
那(nà)怎麽在頁面中運用(yòng)3D元素呢(ne≈₹$)？下(xià)面跟大(dà)家(jiā)介紹三個(gè)好(hǎ∑¶₩✔o)用(yòng)的(de)工(gōng)具：
1.Three.js
目前最好(hǎo)的(de)WebGLli♦€≥brary，也(yě)是(shì)浏覽器(qì)支持最好(hǎ↓← o)最廣泛的(de)類庫，IE11和(hé✔γ )Chrome對(duì)它的(de)支持都(dōu)很(hěn)不(bùγ ו)錯(cuò)，上(shàng)面介紹的(de)案例都(׶" dōu)是(shì)運用(yòng)Thrα ÷eeJS創建的(de)。
2.Blender
Blender是(shì)一(yī)個(☆δgè)免費(fèi)和(hé)開(kāi)源的(de)3D建模φ≤★編輯應用(yòng)，可(kě)以直接導出T♦±☆hreeJS可(kě)用(yòng)的(de)代碼。當然你(↔↓₽nǐ)也(yě)可(kě)以在其他(tā)3D建模工(gōng)≈∞¶≠具如(rú)3DMax，然後導入到(dào)Blen¶★♦der從(cóng)而生(shēng)成ThreeJS可(kě ∏ ♠)用(yòng)的(de)文(wén)件(j↔→iàn)。
3.Voodoojs
這(zhè)是(shì)一(yī)個(gè)全新的(de)JS¶→library讓你(nǐ)創建2D和(hé)3D有(λ±≥yǒu)機(jī)融合的(de)網頁。
工(gōng)具雖好(hǎo)，一(yī)個¥≥(gè)不(bù)可(kě)回避的(de)問(wèn)© ≠題還(hái)是(shì)浏覽器(qì)的(de)支§Ω持，雖然IE都(dōu)已經開(kāi)始支持We¥$bGL了(le)，但(dàn)很(hěn)多(duō)用(yòng)戶≈♦的(de)浏覽器(qì)可(kě)能(néng)還(hái)不(bù)€λ∞♦支持。我建議(yì)開(kāi)發者采用(yòng)漸進式的(de)支持方λ₹法，即給不(bù)同的(de)浏覽器(qì)不(bù)同的ε₽ (de)版本，以确保最先進的(de)浏覽器(qì∏∑'÷)用(yòng)戶獲得(de)最好(hǎo)≠∑體(tǐ)驗，而低(dī)版本浏覽器(qì)±♥ <用(yòng)戶也(yě)能(néng)獲得(de)σ≠良好(hǎo)的(de)效果。以上(shàγσng)介紹的(de)網站(zhàn)均對(duì)不(bù)支•α持WebGL的(de)浏覽器(qì)做(zuò)了(le)适配，拿(ná)&rα'✔dquo;月(yuè)熊志(zhì)”為(wèi)例，這(zhè)↓•個(gè)網站(zhàn)的(de)3D場(chǎng)景在≥↔↑不(bù)支持WebGL的(de)浏覽器(qì)變成了(le)360度連₩™續幀的(de)png圖片，也(yě)能(néng)讓用(∑¥yòng)戶左右滑動來(lái)獲得(de)♠♠•模拟3D效果。
3D對(duì)于網頁來(lái)說(shuō)不(bù)再是(shì♥Ω±)高(gāo)不(bù)可(kě)攀的(de)技(jΩ"♦÷ì)術(shù)，有(yǒu)了(le)浏覽器(qì)的(de)支持和(hΩλ→é)各種JS庫，相(xiàng)信2014年(ni₽¶≈₽án)會(huì)有(yǒu)更多(duō)網站(zhàn™§↑₽)加入3D的(de)元素來(lái)豐富用(yòn♠εg)戶體(tǐ)驗，相(xiàng)信這(zhè)也(yě)是(shì)未₽∑∑ 來(lái)網頁發展的(de)新方向。
