你準備好進入 3D 網頁時代了嗎?

什麼是網頁3D
如何製作 3D 網頁
愛貝斯能做什麼
【網頁設計文章推薦】

什麼是網頁3D

一般網站與3D網站的比較

網站是現今最常使用來認識一家公司的方式之一，如果能夠比同行的競爭者還要有特色，勢必會讓客戶留下更深刻的印象，而 3D 網站就能做到這一點， 3D 網站增加了網站的深度、真實感和新穎性，像是使用網站展示產品，一般的網站主要就是透過圖片、文字、影片來介紹，但如果使用 3D 網站的話，可以讓產品與使用者產生互動，在透過互動的過程中，使用者能夠獲得更多的產品特色及細節，進而節省溝通細節的成本，增加使用者的停留時間，提高購買的意願。
unnamed (2)-min

透過3D網站與使用者的高度互動來陳列產品，不只吸引使用者的目光，還能夠展現一般網站無法呈現的細節。來源：https://adidaschile20.com/

3D網頁的歷史

Flash 時代

過去我們能夠利用 Adobe 所推出的 Adobe Flash Player 來提供有趣的網頁互動，後來由於HTML5、WebGL 和 WebAssembly 的興起以及 Flash 的限制和安全性問題，在 2020 年正式停止更新。

WebGL 標準出現

WebGL 是瀏覽器上的一種 JavaScript API ，協助開發者在不安裝任何插件的情況下，透過canvas 元素，使用互動式的 2D 或 3D 圖形，對各大主流瀏覽器，有著良好的支援度。

基於 WebGL 衍生出的函式庫開始出現

由於 WebGL 是較為底層技術，導致開發者必須了解與網頁開發差異較大的知識，且處理圖形的方式過於複雜，於是開始有許多基於 WebGL 的函式庫開始誕生，像是 Three.js 、Babylon.js 等，這些函式庫的出現，讓開發圖形變得更加容易，越來越多開發者也開始投入，讓網頁3D更加的普及化。

3D 網站的好處

比平面更吸睛

3D 的技術和設計已經是我們生活的一部分。不管使用 APP、遊戲、電影等等都能夠常常發現到 3D 的蹤影，但是 3D 網站受限於技術、設備、效能的影響，過去比較少人使用到這類技術，但是現今人們的基礎設備已經有很大的提升，3D 網站已經具備在大部分的設備運行的能力，相信將會成為網站的趨勢，以下整理出3D網站的特色：

一、互動更加豐富多元

比起平面網站，3D 網站提供更多的互動空間，使用者可以與設計更直接的產生互動，不再只是單方面的獲取資訊。

二、從大部分的網站中脫穎而出

在平面網站還是占大多數的現在，如果使用 3D 網站，並且將視覺及互動設計適當的安排，就有很大的機會從其他網站中脫穎而出，增加網頁曝光率。

三、快速、有效的傳遞訊息

3D 模型如果經過適當的安排，會較平面網站更有助於使用者對目標物有更深入的了解，但是要注意避免過度使用，以免適得其反，讓使用者眼花撩亂。

四、沉浸感強

3D 網站擁有一般網站沒有的沉浸感，還可以延伸至 VR 、 AR 的領域，使內容更加貼近真實，使用者的感官體驗也會更為直覺。

unnamed (3)-min

https://www.blueyard.com/

不同以往的互動方式

隨著近年網站數量不斷的成長，做出吸引使用者目光的網站開始顯得格外重要，而吸引目光很重要的關鍵之一就是互動，3D網站在傳統操作模式的基礎上，擴展了網站互動的可能性，只有使用 3D 網站才能夠呈現，帶給使用者新鮮、不同以往的感官體驗。
unnamed (4)-min

將滑鼠互動與3D物件結合，透過拖移的方式與3D物件產生互動，加深使用者的印象。https://lacasadepapelnetflix.com/

unnamed (5)-min

透過滑鼠的滾動，將內容以3D的方式靈活的切換，豐富畫面的視覺效果。https://experience.soletanche-bachy.com/en/T219-metro-singapore

激發使用者好奇心，延長停留時間

3D網站比一般網站更具有吸引力，若是使用在適合的環境下，還會有加分的效果，讓網站擁有更優質的使用者體驗，像是電子商務、虛擬旅遊、房地產展示、教育等都很適合使用3D網站來呈現，除此之外，還能跟大部分的網站做出區別，引起使用者的好奇心，延長停留的時間。
unnamed (6)-min

美術館將展館搬到網站中，讓使用者不必出門也能參與展出，此項技術還能夠擴展到 VR 、 AR 上，讓使用者沉浸其中，延長停留時間。https://shutdown.gallery/

如何製作 3D 網頁

[建模、three.js、場景、光影]

製作3D網站的流程大致上包含了，建模、動畫製作、輸出、模型匯入、光影設定、材質貼圖設定、互動製作，這些內容依照需求的複雜程度，有些過程是可以省略的，但是建模跟匯入網站的這兩個步驟，是不可或缺的關鍵，所以只要能夠掌握這兩個步驟，就能做出基本的3D網站。

一、建模

市面上有許多可以使用的 3D 的軟體，但是因為我們的目的是要放到網頁內，就需要按照網頁的情況去做調整，目前網頁常用的 3D 函式庫是Three.js，該函式庫官方推薦使用的 3D 檔案格式為 glTF，只要能夠使用這個格式輸出的 3D 軟體都可以使用，像是 Blender 、 Cinema 4D 等，使用 3D 軟體建模，並輸出成 glTF 格式就完成匯入網站前的事前準備了。
3D軟體， Blender 的介面

二、動畫

如果覺得單純的模型過於單調，有些人會選擇在模型中加入動畫，而較簡單的動畫其實可以在函式庫中加入，但是若是一些比較複雜的動畫，像是人物走動、人物表情等，這樣的動畫可以在 3D 軟體中一併處理並輸出，之後匯入網頁後再進行設定。

三、匯入網頁

模型處理好後，跟網頁的資料夾放在一起，接著可以透過前面提到的 Three.js 函式庫進行匯入，詳細的匯入方式可以參考官方文件，匯入之後就可以開始依照需求做一些細部的調整，以及互動的製作。
四、光影、材質、貼圖設定
模型的光源的部分建議不要從 3D 軟體直接輸出，因為很有可能會跟在 3D 軟體看到的有很大的落差，建議可以匯入到網頁後再進行設定或是使用官方提供的3D編輯器來進行打光，而材質的部分建議使用 3D 軟體中最基本的材質，以避免在網頁中無法顯示，貼圖的部分只要在 3D 中有正確的完成，便可以直接匯入網站中。

五、互動製作

根據網頁的類型，再確定模型正確的顯示後，就可以開始撰寫與使用者互動的程式，例如依照使用者滾輪滾動比例顯示 3D 物件不同角度，或是監聽使用者點擊事件觸發動畫等。互動的製作可以幫助使用者更輕易的瀏覽你所製作的 3D 模型，若少了互動 3D 模型就是單純的圖片、影片而已，所以好的互動設計也是 3D 網站成功的關鍵之一。

愛貝斯能做什麼

愛貝斯認為網頁 3D 將會是未來趨勢，在這個宅經濟的時代，許多事情都開始走向網路，在這個需求的逐漸增長以及設備性能的提升下，網頁 3D 的互動性、趣味性、實用性，勢必會逐漸成為主流的網頁類型之一。

哪些情況適合使用3D網站？

建立生動有趣的網站，加強品牌形象
3D 網站強大的互動性，結合企業的品牌理念，讓形象網站生動活潑且充滿趣味性，如此一來，便能快速地抓住使用者的目光，留下深刻的品牌印象。

同行競爭者眾多，需要一個獨樹一幟的網站推銷自家產品
當大部分的網站都還是平面網站時，3D 網站就會變得很有特色，只要經過合理的設計版面、互動、內容，就會讓網站更有機會被更多人看見，除此之外，3D 網站可以將商品更加直接地讓消費者了解，消除消費者內心中不確定的疑慮，提升轉換率！

線上展示實體設施
如果是以租借場地為主的商家，像是飯店、健身房、包廂等，這類的商家就很適合使用線上展示的方式來製作 3D 網站，只要將 3D 的場地模型置入網站中，就可以讓使用者能更快速的找到適合的場地。

參考資料

http://test.domojyun.net/MEMO/3D/webgl.html
https://zh.wikipedia.org/wiki/%E7%BD%91%E7%BB%9C%E4%B8%89%E7%BB%B4
https://zh.wikipedia.org/wiki/X3D
https://zh.wikipedia.org/wiki/WebGL -----------------------------