iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 30
2
Modern Web

用 Three.js 來當個創世神系列 第 30

用 Three.js 來當個創世神 (29):大綱與 Three.js 學習資源

本系列文也即將接近尾聲,此篇會帶各位讀者瀏覽整個系列文的大綱涵蓋了哪些內容,並且最後會分享這兩個月以來的學習資源,提供對 Three.js 有興趣的讀者做更進一步的研究。

29_front

Photo by Glenn Carstens-Peters on Unsplash


系列文大綱

前言

Three.js 基礎

材質與光源

動畫

粒子系統

物理引擎

專案整合

結語

 

程式碼位置

 

專案展示

 

延伸學習資源

其實筆者大約是九月初才開始練習寫 Three.js 的,所以在鐵人賽中參考了相當多的學習資源,才能順利地完成專案並寫成文章記錄下來。

而 Three.js 的內容遠不止本系列文介紹的這些,有許多跟 shader(著色器)相關的內容,目前尚來不及學完所以本系列沒有使用,以下分享這兩個月的學習資源供有興趣的讀者深入研究:

Learning Three.js: The JavaScript 3D Library for WebGL

這是 Learning Three.js: The JavaScript 3D Library for WebGL 這本書的作者開源的 Github 範例程式,範例由淺入深有基本元素、高級幾何體、粒子系統、動畫、著色器等內容,是相當適合入門全面性學習 Three.js 的資源。

筆者有購買它的中譯本來當工具書翻,並且文章中有幾個範例也有參考裡面的範例做為學習。

不過要特別提醒,本書使用的 Three.js 是 r63,現在最新的是 r98,有一些程式碼需要自己改成新的 API 才能跑。

官方文件與範例

其實 Three.js 的官方文件寫得蠻完整的,社區中也有許多開發者提供範例讓初學者參考,由於 Three.js 的 API 相當之多,大部分都是需要用到才會來這邊查。

Three.js笔记

這是在實作 PointerLockControls 時找到的資源,意外發現作者做的 Three.js 筆記之詳細,也是一個很棒的入門與深入學習資源,甚至還有 WebGL 相關的內容。

WebGL 與 Three.js 初探

前年鐵人賽由 kalan.chen 寫的系列文,裡面有許多關於 Three.js 底層 WebGL 的 GSGL 語法教學,並且也有對於 Three.js 入門的介紹,如果看不懂本系列文的解釋,也可以換個口味試試。

Three.js粒子特效,shader渲染初探

在學習粒子系統時找到的文章,作者用幽默詼諧的風格快速講解 Three.js 的入門並進階到粒子系統,算是不錯的入門學習文章。

今日小結

今天將整個系列文的大綱整理起來,方便讀者做瀏覽時的查閱;也分享了這兩個月來學習 Three.js 的資源,希望對想深入了解 Three.js 的讀者有幫助。

另外筆者也會找時間將文章慢慢整理到 HackMD Book 上,或許能做更方便的閱讀,下一篇會分享此次的參賽心得,替整個鐵人賽做個總結。


上一篇
用 Three.js 來當個創世神 (28):專案實作#17 - 遊戲完成!
下一篇
用 Three.js 來當個創世神 (30):總結與心得
系列文
用 Three.js 來當個創世神31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言