3D 網站開發入門筆記

前言

本系列主要分為三大章,是一種從困難到簡單開發的概念喔!
  1. WebGL 觀念介紹
    首先提及 WebGL 基礎的 3D 概念,因為 WebGL 實際撰寫困難且開發時間較長,這邊不做詳細程式碼解說和實作,以講解 3D 成像原理和流程為主。
  2. Three.js 入門
    接著以 Three.js 框架實作,因原生 WebGL 的開發難度頗高,所以常需要 3D 框架來進行開發,而 Three.js 是最受歡迎的開發框架之一,類似 jQuery 把 JavaScript 的方法組合成更直觀的名稱,命名的方式類似 3D 軟體使用的方式,這章節會把所有基礎用法帶過一遍。
  3. A-Frame 入門
    最後再進一步談以 VR 為主的框架 A-Frame,因為此框架更降低開發難度,會對不太會寫 JavaScript 的人來說比 Three.js 更加容易上手、易懂,或是對於手機效能優化不太熟的朋友來說,A-Frame 會是更好的選擇。

首先先講一下當初會選擇將三者列出來筆記,是因為 Three.js 是很常見的3D 網站開發框架,加上開發者多、討論區非常健全,所以要找什麼效果也會比較好找到範例!

但是做 3D 網站之前還是要先了解 3D 渲染的原理,尤其完全沒碰過 3D 軟體的人可能要多一點時間學習理解,才能將 3D 網站的語法和空間概念更為熟練,因此把 WebGL 列為第一章的概念介紹,是為了往後在開發時遇到困難,可以利用這份概念解說往源頭語法找到答案!

最後會將 A-Frame 放進來是基於「移動用戶」普遍開發需求,VR 會是 3D 網頁的另一門主要顯學,加上 A-Frame 不僅支援手機,還包含其他 VR 裝置,重點是它的寫發大大降低困難度,讓開發者可以更專心在互動邏輯上!

建議想趕快上手的初學者,可以從 A-Frame 往回看,從 A-Frame 先玩起來,若有需要可以再往更深入的 Three.js,最後再回頭看 WebGL 原理,這樣比較能理解其中奧妙,也不會挫折感太重喔!

實際上在開發,都會使用 Three.js 和 A-Frame,但這裡僅供入門教學,更商業應用的部分會另外拉出來說明,但切記這兩個外掛都是基於 WebGL 的框架,如果要製作非常特殊的效果,還是有可能需要用原生 WebGL 撰寫,請再詳讀原書或尋找相關網路資源,當然不管是用框架還是原生 WebGL,都還有很多強大功能和效果可以慢慢學習,請自行挖掘,也歡迎跟我分享!

本文 WebGL 和 Three.js 的部分,是參考《瀏覽器語言專用 3D 引擎 WebGL 完全剖析》此書,純屬筆記整理分享,非商業用途,有興趣請購買原書,部分資料來源參考 Three.js 和 A-Frame 官網以及相關網路資源翻譯。

DEMO MEMO