什麼是網頁3D一般網站與3D網站的比較網站是現今最常使用來認識一傢公司的方式之一，如果能夠比同行的競爭者還要有特色，勢必會讓客戶留下更深刻的印象，而 3D 網站就能做到這一點， 3D 網站增加瞭網站的深度、真實感和新穎性，像是使用網站展示產品，一般的網站主要就是透過圖片、文字、影片來介紹，但如果使用 3D 網站的話，可以讓產品與使用者產生互動，在透過互動的過程中， 用戶能夠獲得更多的產品特色及細節，進而節省溝通細節的成本，增加用戶的停留時間，提高購買的意願。透過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的領域，使內容更加貼近真實，用戶的感官體驗也會更為直覺。https://www.blueyard.com/不同以往的互動方式隨著近年網站數量不斷的成長，做出吸引用戶目光的網站開始顯得格外重要，而吸引目光很重要的關鍵之一就是互動，3D網站在傳統操作模式的基礎上，擴展瞭網站互動的可能性，隻有使用3D網站才能夠呈現，帶給用戶新鮮、不同以往的感官體驗。將鼠標互動與3D對象結合，透過拖移的方式與3D對象產生互動，加深使用者的印象。 https://lacasadepapelnetflix.com/透過鼠標的滾動，將內容以3D的方式靈活的切換，豐富畫面的視覺效果。 https://experience.soletanche-bachy.com/en/T219-metro-singapore激發用戶好奇心，延長停留時間3D網站比一般網站更具有吸引力，若是使用在適合的環境下，還會有加分的效果，讓網站擁有更優質的用戶體驗，像是電子商務、虛擬旅遊、房地產展示、教育等都很適合使用3D網站來呈現，除此之外，還能跟大部分的網站做出區別，引起用戶的好奇心，延長停留的時間。美術館將展館搬到網站中，讓用戶不必出門也能參與展出，此項技術還能夠擴展到 VR、 AR 上，讓用戶沉浸其中，延長停留時間。 https://shutdown.gallery/如何制作 3D 網頁[建模、three.js、場景、光影]制作3D網站的流程大致上包含瞭，建模、動畫制作、輸出、模型匯入、光影設定、材質貼圖設定、互動制作，這些內容依照需求的復雜程度，有些過程是可以省略的，但是建模跟匯入網站的這兩個步驟，是不可或缺的關鍵，所以隻要能夠掌握這兩個步驟，就能做出基本的3D網站。一、建模市面上有許多可以使用的 3D 的軟件，但是因為我們的目的是要放到網頁內，就需要按照網頁的情況去做調整，目前網頁常用的 3D 函式庫是Three.js，該函式庫官方推薦使用的 3D 檔案格式為 glTF，隻要能夠使用這個格式輸出的 3D 軟件都可以使用，像是 Blender 、 Cinema 4D 等，使用 3D 軟件建模，並輸出成 glTF 格式就完成匯入網站前的事前準備瞭。二、動畫如果覺得單純的模型過於單調，有些人會選擇在模型中加入動畫，而較簡單的動畫其實可以在函式庫中加入，但是若是一些比較復雜的動畫，像是人物走動、人物表情等，這樣的動畫可以在3D軟件中一並處理並輸出，之後匯入網頁後再進行設定。三、匯入網頁模型處理好後，跟網頁的文件夾放在一起，接著可以通過前面提到的 Three.js 庫進行導入，詳細的導入方式可以參考官方文件，導入之後就可以開始依照需求做一些細部的調整，以及互動的制作。四、光影、材質、貼圖設定模型的光源的部分建議不要從3D軟件直接輸出，因為很有可能會跟在3D軟件看到的有很大的落差，建議可以導入到網頁後再進行設定或是使用官方提供的3D編輯器來進行打光，而材質的部分建議使用3D軟件中最基本的材質，以避免在網頁中無法顯示，貼圖的部分隻要在3D中有正確的完成，便可以直接匯入網站中。五、互動制作根據網頁的類型，再確定模型正確的顯示後，就可以開始撰寫與使用者互動的程序，例如依照用戶滾輪滾動比例顯示3D對象不同角度，或是監聽用戶點擊事件觸發動畫等。 互動的制作可以幫助用戶更輕易的瀏覽你所制作的 3D 模型，若少瞭互動 3D 模型就是單純的圖片、影片而已，所以好的互動設計也是 3D 網站成功的關鍵之一。浪知潮能做什麼浪知潮認為網頁3D將會是未來趨勢，在這個宅經濟的時代，許多事情都開始走向網絡，在這個需求的逐漸增長以及設備性能的提升下，網頁3D的互動性、趣味性、實用性，勢必會逐漸成為主流的網頁類型之一。哪些情況適合使用3D網站？建立生動有趣的網站，加強品牌形象3D 網站強大的互動性，結合企業的品牌理念，讓形象網站生動活潑且充滿趣味性，如此一來，便能快速地抓住用戶的目光，留下深刻的品牌印象。同行競爭者眾多，需要一個獨樹一幟的網站推銷自傢產品當大部分的網站都還是平面網站時，3D 網站就會變得很有特色，隻要經過合理的設計版面、互動、內容，就會讓網站更有機會被更多人看見，除此之外，3D 網站可以將商品更加直接地讓消費者瞭解，消除消費者內心中不確定的疑慮，提升轉換率！線上展示實體設施如果是以租借場地為主的商傢，像是飯店、健身房、包廂等，這類的商傢就很適合使用線上展示的方式來制作3D網站，隻要將3D的場地模型置入網站中，就可以讓用戶能更快速的找到適合的場地。