<big id="n3dbt"><strong id="n3dbt"></strong></big>
      1. <small id="n3dbt"><delect id="n3dbt"></delect></small>

        <thead id="n3dbt"><ruby id="n3dbt"><rp id="n3dbt"></rp></ruby></thead>
        <th id="n3dbt"></th>
        <span id="n3dbt"></span><span id="n3dbt"></span><span id="n3dbt"></span><strike id="n3dbt"></strike>

        建站百科Website News

        當前位置:首頁 »網頁設計新趨勢:3D WEBGL的運用

        網頁設計新趨勢:3D WEBGL的運用

        至成科技 2015-10-23 訪問量(7416) 評論(0)
        摘要:

            【至成科技按】:這么多年以來,網站設計似乎都停留在2D的世界。2012年末開始到整個2014年,涌現出非常多采用CSS 3D變形和Parallax(視覺差,通過鼠標滑動讓網頁上不同層次的內容以不同的速率位移而形成一種層次感)效果的網站,讓這個2D的網絡世界出現了豐富的層次和縱深感。但是真正的3D(除了flash實現的)似乎沒有成為網站設計師的工具,不過這種情況應該會在2015年有所改變。

            目前在HTML里實現無插件3D內容呈現的技術就是WebGL,這個技術其實并不復雜,但是之前由于缺乏瀏覽器的支持而一直沒能被廣發使用,這一切都可能改變,因為微軟發布的IE11已經好支持WebGL,加上Chrome和Firefox,可以說現在是時候在網頁設計里加入3D元素了。

            談到WebGL 3D,大家可能先進個想到的就是游戲網站設計,但其實WebGL在西安網站設計中也大有可為,我覺得WebGL不僅僅可以運用在大型的全屏體驗中,也有效可以作為頁面元素和其他內容融合在一起,給用戶一種新奇的酷炫的體驗,我們來看一些例子。

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

        西安網站設計:moonbear

            微軟IE推出的另外一個WebGL體驗,和紅牛)合作設計的網站Rampage對WebGL的運用也相當新穎。這是紅牛每年都舉辦的極限單車比賽,網站通過3D WebGL技術再現了比賽環境,用戶可以通過拖動或者點擊3D環境上的節點來控制比賽視頻的播放。網站不僅僅利用WebGL,也運用了很多CSS 3D Transform來讓一些2D元素擁有立體的效果,比如視頻。

        西安網站設計:acko

            一位法國的前端設計師和開發者Yann Kozon在他的個人作品網站中也加入WebGL的3D元素。首頁是立體的多面體,并隨著音樂有韻律的上下抖動,進入他的作品頁你會發現左右作品都是一個個立體的金字塔,內容和立體效果很好地結合在一起。

        西安網站設計:yannkozon

            為了說明3D元素怎樣結合到平時的靜態頁面中,網站設計師GUILLAUME LECOLLINET做了一個WebGL的demo頁面。頁面上呈現了3個東西:先進個HTML5盾牌,鼠標懸停會進行翻轉;第二個框線球會有落下彈起的重力效果;第三個就是美元符號,會跟隨鼠標懸停位置呈現不一樣角度的陰影。從這個demo當中我們可以看到簡單的3D效果有效可以讓頁面變得生動有趣。

        西安網站設計:glecollinet

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

            試想一下,我們現在很多網頁的Logo都是圖片,但是如果帶有一些3D的效果,一定會特別有意思。可能你會問,這能給用戶帶來多大價值呢?可能實用性上確實沒有多少,但很多時候,我們也要討用戶歡心,讓用戶展現笑容,所謂的”delight”的作用,增加用戶好感度。同時,這也可以展現一個網頁的性格和技術的前瞻性,這方面是設計師和開發者需要好好考慮的。

        那怎么在頁面中運用3D元素呢?下面跟大家介紹三個好用的工具:

        1. Three.js (http://threejs.org

        目前較好的WebGL library,也是瀏覽器支持較好較廣泛的類庫,IE11和Chrome對它的支持都很不錯,上面介紹的案例都是運用ThreeJS創建的。

        2. Blender (http://www.blender.org

        Blender是一個免費和開源的3D建模編輯應用,可以直接導出ThreeJS可用的代碼。當然你也可以在其他3D建模工具如3DMax,然后導入到Blender從而生成ThreeJS可用的文件。

        3. Voodoojs (http://www.voodoojs.com

        這是一個全新的JS library讓你創建2D和3D有機融合的網頁。

            工具雖好,一個不可回避的問題還是瀏覽器的支持,雖然IE都已經開始支持WebGL了,但很多用戶的瀏覽器可能還不支持。我建議開發者采用漸進式的支持方法,即給不同的瀏覽器不同的版本,以較先進的瀏覽器用戶獲得較好體驗,而0版本瀏覽器用戶也能獲得良好的效果。以上介紹的網站均對不支持WebGL的瀏覽器做了適配,拿”月熊志”為例,這個網站設計的3D場景在不支持WebGL的瀏覽器變成了360度連續幀的png圖片,也能讓用戶左右滑動來獲得模擬3D效果。

        至成科技(西安網站設計)總結:

            3D對于網頁來說不再是高不可攀的技術,有了瀏覽器的支持和各種JS庫,相信2014年會有更多網站加入3D的元素來豐富用戶體驗,相信這也是未來網頁發展的新方向。

        網友評論

        登錄后可評論,請登錄

        全部評論:0條

        掃描左側二維碼
        關注至成微信公眾號

        西安至成信息科技有限公司  Copyright 2012-2019  xazcit.com  All rights reserved.

        Email:[email protected]     郵政編碼:710016     《中華人民共和國增值電信業務經營許可證》陜B1.B2-20140011     陜ICP備12008874號-1

        聯系地址:西安市經開區鳳城四路西安國際企業中心B座23層06-10室    售前咨詢熱線:029-89390727    售后服務電話:029-89393039

        西安網站建設、網站設計制作公司-至成科技,已為眾多企業提供網站建設網站制作響應式網站設計手機網站建設虛擬主機云主機服務器租用等建站解決方案。

        網絡警察 12321垃圾信息舉報 不良信息舉報 中國文明網 西安工商
        ×
        安徽25选5计划 乐彩 网球比分直播快捷雷速 中国足彩网上投注 2010年cba全明星赛 香港赛马会独平码一 湖北11选5结果l爱彩乐 彩票软件开发公司 7星彩怎么算中奖 大乐透基本走势图表图 天天彩票网站 超级大乐透走势图500 15124开头手机选号 安徽快3开奖结果今天开奖号码查询 喜乐彩什么时候开奖 江西多乐彩十一选五开奖结果查询