你準(zhǔn)備好進(jìn)入3D網(wǎng)站時(shí)代了嗎？

時(shí)間：2023-06-21 21:33:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-06-21 21:33:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

你準(zhǔn)備好進(jìn)入3D網(wǎng)站時(shí)代了嗎？：

什么是網(wǎng)頁(yè)3D

一般網(wǎng)站與3D網(wǎng)站的比較

網(wǎng)站是現(xiàn)今最常使用來(lái)認(rèn)識(shí)一家公司的方式之一，如果能夠比同行的競(jìng)爭(zhēng)者還要有特色，勢(shì)必會(huì)讓客戶留下更深刻的印象，而 3D 網(wǎng)站就能做到這一點(diǎn)， 3D 網(wǎng)站增加了網(wǎng)站的深度、真實(shí)感和新穎性，像是使用網(wǎng)站展示產(chǎn)品，一般的網(wǎng)站主要就是透過(guò)圖片、文字、影片來(lái)介紹，但如果使用 3D 網(wǎng)站的話，可以讓產(chǎn)品與使用者產(chǎn)生互動(dòng)，在透過(guò)互動(dòng)的過(guò)程中， 用戶能夠獲得更多的產(chǎn)品特色及細(xì)節(jié)，進(jìn)而節(jié)省溝通細(xì)節(jié)的成本，增加用戶的停留時(shí)間，提高購(gòu)買的意愿。







透過(guò)3D網(wǎng)站與使用者的高度互動(dòng)來(lái)陳列產(chǎn)品，不只吸引使用者的目光，還能夠展現(xiàn)一般網(wǎng)站無(wú)法呈現(xiàn)的細(xì)節(jié)。 來(lái)源：https://http://adidaschile20.com/

3D網(wǎng)頁(yè)的歷史

Flash 時(shí)代

過(guò)去我們能夠利用 Adobe 所推出的 Adobe Flash Player 來(lái)提供有趣的網(wǎng)頁(yè)互動(dòng)，后來(lái)由于HTML5、WebGL 和 WebAssembly 的興起以及 Flash 的限制和安全性問(wèn)題，在 2020 年正式停止更新。

WebGL 標(biāo)準(zhǔn)出現(xiàn)

WebGL 是瀏覽器上的一種 JavaScript API ，協(xié)助開(kāi)發(fā)者在不安裝任何插件的情況下，通過(guò)canvas 元素，使用交互式的 2D 或 3D 圖形，對(duì)各大主流瀏覽器，有著良好的支持度。

基于 WebGL 衍生出的庫(kù)開(kāi)始出現(xiàn)

由于 WebGL 是較為底層技術(shù)，導(dǎo)致開(kāi)發(fā)者必須了解與網(wǎng)頁(yè)開(kāi)發(fā)差異較大的知識(shí)，且處理圖形的方式過(guò)于復(fù)雜，于是開(kāi)始有許多基于 WebGL 的函式庫(kù)開(kāi)始誕生，像是 Three.js 、Babylon.js 等，這些函式庫(kù)的出現(xiàn)，讓開(kāi)發(fā)圖形變得更加容易，越來(lái)越多開(kāi)發(fā)者也開(kāi)始投入，讓網(wǎng)頁(yè)3D更加的普及化。

3D 網(wǎng)站的好處

比平面更吸睛

3D 的技術(shù)和設(shè)計(jì)已經(jīng)是我們生活的一部分。 不管使用APP、游戲、電影等等都能夠常常發(fā)現(xiàn)到3D的蹤影，但是3D網(wǎng)站受限于技術(shù)、設(shè)備、效能的影響，過(guò)去比較少人使用到這類技術(shù)，但是現(xiàn)今人們的基礎(chǔ)設(shè)備已經(jīng)有很大的提升，3D網(wǎng)站已經(jīng)具備在大部分的設(shè)備運(yùn)行的能力，相信將會(huì)成為網(wǎng)站的趨勢(shì)，以下整理出3D網(wǎng)站的特色：

一、互動(dòng)更加豐富多元

比起平面網(wǎng)站，3D 網(wǎng)站提供更多的互動(dòng)空間，用戶可以與設(shè)計(jì)更直接的產(chǎn)生互動(dòng)，不再只是單方面的獲取信息。

二、從大部分的網(wǎng)站中脫穎而出

在平面網(wǎng)站還是占大多數(shù)的現(xiàn)在，如果使用3D網(wǎng)站，并且將視覺(jué)及互動(dòng)設(shè)計(jì)適當(dāng)?shù)陌才牛陀泻艽蟮臋C(jī)會(huì)從其他網(wǎng)站中脫穎而出，增加網(wǎng)頁(yè)曝光率。

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

3D 模型如果經(jīng)過(guò)適當(dāng)?shù)陌才?，?huì)較平面網(wǎng)站更有助于用戶對(duì)目標(biāo)物有更深入的了解，但是要注意避免過(guò)度使用，以免適得其反，讓用戶眼花撩亂。

四、沉浸感強(qiáng)

3D網(wǎng)站擁有一般網(wǎng)站沒(méi)有的沉浸感，還可以延伸至VR、AR的領(lǐng)域，使內(nèi)容更加貼近真實(shí)，用戶的感官體驗(yàn)也會(huì)更為直覺(jué)。







https://http://www.blueyard.com/

不同以往的互動(dòng)方式

隨著近年網(wǎng)站數(shù)量不斷的成長(zhǎng)，做出吸引用戶目光的網(wǎng)站開(kāi)始顯得格外重要，而吸引目光很重要的關(guān)鍵之一就是互動(dòng)，3D網(wǎng)站在傳統(tǒng)操作模式的基礎(chǔ)上，擴(kuò)展了網(wǎng)站互動(dòng)的可能性，只有使用3D網(wǎng)站才能夠呈現(xiàn)，帶給用戶新鮮、不同以往的感官體驗(yàn)。







將鼠標(biāo)互動(dòng)與3D對(duì)象結(jié)合，透過(guò)拖移的方式與3D對(duì)象產(chǎn)生互動(dòng)，加深使用者的印象。 https://lacasadepapelnetflix.com/







透過(guò)鼠標(biāo)的滾動(dòng)，將內(nèi)容以3D的方式靈活的切換，豐富畫(huà)面的視覺(jué)效果。 https://experience.soletanche-bachy.com/en/T219-metro-singapore

激發(fā)用戶好奇心，延長(zhǎng)停留時(shí)間

3D網(wǎng)站比一般網(wǎng)站更具有吸引力，若是使用在適合的環(huán)境下，還會(huì)有加分的效果，讓網(wǎng)站擁有更優(yōu)質(zhì)的用戶體驗(yàn)，像是電子商務(wù)、虛擬旅游、房地產(chǎn)展示、教育等都很適合使用3D網(wǎng)站來(lái)呈現(xiàn)，除此之外，還能跟大部分的網(wǎng)站做出區(qū)別，引起用戶的好奇心，延長(zhǎng)停留的時(shí)間。







美術(shù)館將展館搬到網(wǎng)站中，讓用戶不必出門也能參與展出，此項(xiàng)技術(shù)還能夠擴(kuò)展到 VR、 AR 上，讓用戶沉浸其中，延長(zhǎng)停留時(shí)間。 https://shutdown.gallery/

如何制作 3D 網(wǎng)頁(yè)

[建模、three.js、場(chǎng)景、光影]

制作3D網(wǎng)站的流程大致上包含了，建模、動(dòng)畫(huà)制作、輸出、模型匯入、光影設(shè)定、材質(zhì)貼圖設(shè)定、互動(dòng)制作，這些內(nèi)容依照需求的復(fù)雜程度，有些過(guò)程是可以省略的，但是建模跟匯入網(wǎng)站的這兩個(gè)步驟，是不可或缺的關(guān)鍵，所以只要能夠掌握這兩個(gè)步驟，就能做出基本的3D網(wǎng)站。

一、建模

市面上有許多可以使用的 3D 的軟件，但是因?yàn)槲覀兊哪康氖且诺骄W(wǎng)頁(yè)內(nèi)，就需要按照網(wǎng)頁(yè)的情況去做調(diào)整，目前網(wǎng)頁(yè)常用的 3D 函式庫(kù)是Three.js，該函式庫(kù)官方推薦使用的 3D 檔案格式為 glTF，只要能夠使用這個(gè)格式輸出的 3D 軟件都可以使用，像是 Blender 、 Cinema 4D 等，使用 3D 軟件建模，并輸出成 glTF 格式就完成匯入網(wǎng)站前的事前準(zhǔn)備了。

二、動(dòng)畫(huà)

如果覺(jué)得單純的模型過(guò)于單調(diào)，有些人會(huì)選擇在模型中加入動(dòng)畫(huà)，而較簡(jiǎn)單的動(dòng)畫(huà)其實(shí)可以在函式庫(kù)中加入，但是若是一些比較復(fù)雜的動(dòng)畫(huà)，像是人物走動(dòng)、人物表情等，這樣的動(dòng)畫(huà)可以在3D軟件中一并處理并輸出，之后匯入網(wǎng)頁(yè)后再進(jìn)行設(shè)定。

三、匯入網(wǎng)頁(yè)

模型處理好后，跟網(wǎng)頁(yè)的文件夾放在一起，接著可以通過(guò)前面提到的 Three.js 庫(kù)進(jìn)行導(dǎo)入，詳細(xì)的導(dǎo)入方式可以參考官方文件，導(dǎo)入之后就可以開(kāi)始依照需求做一些細(xì)部的調(diào)整，以及互動(dòng)的制作。

四、光影、材質(zhì)、貼圖設(shè)定

模型的光源的部分建議不要從3D軟件直接輸出，因?yàn)楹苡锌赡軙?huì)跟在3D軟件看到的有很大的落差，建議可以導(dǎo)入到網(wǎng)頁(yè)后再進(jìn)行設(shè)定或是使用官方提供的3D編輯器來(lái)進(jìn)行打光，而材質(zhì)的部分建議使用3D軟件中最基本的材質(zhì)，以避免在網(wǎng)頁(yè)中無(wú)法顯示，貼圖的部分只要在3D中有正確的完成，便可以直接匯入網(wǎng)站中。

五、互動(dòng)制作

根據(jù)網(wǎng)頁(yè)的類型，再確定模型正確的顯示后，就可以開(kāi)始撰寫(xiě)與使用者互動(dòng)的程序，例如依照用戶滾輪滾動(dòng)比例顯示3D對(duì)象不同角度，或是監(jiān)聽(tīng)用戶點(diǎn)擊事件觸發(fā)動(dòng)畫(huà)等。 互動(dòng)的制作可以幫助用戶更輕易的瀏覽你所制作的 3D 模型，若少了互動(dòng) 3D 模型就是單純的圖片、影片而已，所以好的互動(dòng)設(shè)計(jì)也是 3D 網(wǎng)站成功的關(guān)鍵之一。

浪知潮能做什么

浪知潮認(rèn)為網(wǎng)頁(yè)3D將會(huì)是未來(lái)趨勢(shì)，在這個(gè)宅經(jīng)濟(jì)的時(shí)代，許多事情都開(kāi)始走向網(wǎng)絡(luò)，在這個(gè)需求的逐漸增長(zhǎng)以及設(shè)備性能的提升下，網(wǎng)頁(yè)3D的互動(dòng)性、趣味性、實(shí)用性，勢(shì)必會(huì)逐漸成為主流的網(wǎng)頁(yè)類型之一。

哪些情況適合使用3D網(wǎng)站？

建立生動(dòng)有趣的網(wǎng)站，加強(qiáng)品牌形象

3D 網(wǎng)站強(qiáng)大的互動(dòng)性，結(jié)合企業(yè)的品牌理念，讓形象網(wǎng)站生動(dòng)活潑且充滿趣味性，如此一來(lái)，便能快速地抓住用戶的目光，留下深刻的品牌印象。

同行競(jìng)爭(zhēng)者眾多，需要一個(gè)獨(dú)樹(shù)一幟的網(wǎng)站推銷自家產(chǎn)品

當(dāng)大部分的網(wǎng)站都還是平面網(wǎng)站時(shí)，3D 網(wǎng)站就會(huì)變得很有特色，只要經(jīng)過(guò)合理的設(shè)計(jì)版面、互動(dòng)、內(nèi)容，就會(huì)讓網(wǎng)站更有機(jī)會(huì)被更多人看見(jiàn)，除此之外，3D 網(wǎng)站可以將商品更加直接地讓消費(fèi)者了解，消除消費(fèi)者內(nèi)心中不確定的疑慮，提升轉(zhuǎn)換率！

線上展示實(shí)體設(shè)施

如果是以租借場(chǎng)地為主的商家，像是飯店、健身房、包廂等，這類的商家就很適合使用線上展示的方式來(lái)制作3D網(wǎng)站，只要將3D的場(chǎng)地模型置入網(wǎng)站中，就可以讓用戶能更快速的找到適合的場(chǎng)地。