記得自己在前一年底的時候才接觸 3D 網站,所以在那之前對 3D 網站都沒有任何概念,當時在網路上相關的文件很少,然後也看不太懂教學在寫啥…也試著買了這本 WebGL 入門的書來看,說是入門嘛……我當時真的有看也沒有懂😢……每個範例的程式碼都超級長,寫一個三角形就去了半條命了…😭😭😭 試了幾個範例發現有些不成功就放棄了!💩 好令人感到沮喪的一本書喔😭 於是就被我擱到一邊去了!😆

直到我在 Codrops 看到這篇文章 The Making of “The Aviator”: Animating a Basic 3D Scene with Three.js!!😳😳😳 才真正開啟了我對 Three.js 的接觸~我透過這篇教學發現原來 Three.js 可以這麼簡單可愛~❤ 把機車的 WebGL 都包起來了!而且順便重學了 JavaScript 建物件的技巧和概念😂 後來也藉此做了幾個小 Demo😉 因為以前學過 Maya,所以對 Three.js 的方法名稱感覺很熟悉,就像是從軟體轉成用程式寫 3D,當時非常震撼啊!(我超無知😂)相當感謝這篇文章!🙏 推薦大家也可以去欣賞一下,這個遊戲背後的邏輯和寫法(而且他的程式碼無敵整齊😍),真的很神奇又很長智慧!👍

但是當我做完整個遊戲且理解它之後,我還是很納悶…難道用 Three.js 刻出遊戲要寫這麼大一坨東西喔…那這樣依照一般工時開發還是相當困難,包含那些物理邏輯、碰撞概念…等等,實在還是要花非常多時間啊…🙄🙄🙄

後來我遇到了 A-Frame!就發現「代誌不是憨人想的那麼簡單」!!竟然用短短幾行程式碼解決很多 Three.js 要寫一長串的寫法😳😳😳 真感謝世界有這麼多天才前端大大😂

歷經跟 3D 網站單打獨鬥的經驗,以及也覺得自己還不夠熟悉的因素,決定也來寫一下筆記,於是回頭看了那本 WebGL 的書,然後我……終於看懂了!!!😳😳😳 要過一年才長了智慧也真的很慢熟😂😂😂 差不多是去年 12 月到最近才完成的!希望對路過的人有幫助!因為本篇文件差不多 60 頁…(我已經刪減再刪減了!😅)所以我會建議初學者可以先稍微瀏覽過一遍 WebGL 的概念,然後看自己的能力決定要從 A-Frame 還是 Three.js 開始玩起(這兩者先學哪個並不衝突),裡面也有附上自己開發過的經驗心得,讓你在開發時可以先避掉一些問題喔!😉最後玩熟一點,可以再回頭看 WebGL,也許會發現以前沒想過的問題,就會找到更快的途徑把 3D 網站學好了!😊

全部的範例:3D WebGL 網站開發入門筆記.zip,請搭配服用喔!

180220 更新,重新將筆記轉成網頁版本!😊
網址在這邊:http://test.domojyun.net/MEMO/3D/

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *