學習 Threejs、TypeScript 和 NodeJS 在 Web 上創建互動式 3D 內容。
從這 8.5 小時的課程,你會學到
- 透過大量演示和範例程式碼了解 Threejs 的基礎知識
- 使用 VSCode、Git 和 NodeJS 設定開發環境
- 安裝 TypeScript
- 使用 NPM 和套件 json 建立 Threejs 專案
- 了解 VIte 捆綁程式以及為瀏覽器用戶端提供 ES6 模組。
- 建立(或選擇安裝)Threejs TypeScript 樣板以供整個課程使用
- 了解 Threejs 場景、相機和渲染器
- 了解動畫循環
- 了解 Stats、Dat GUI 和 lil-gui 面板
- 了解 Object3D 基底類別以及旋轉、位置、縮放、可見性和矩陣屬性
- 了解長方體、球體、二十面體、平面、環面結等幾何形狀
- 了解Basic、Normal、Phong、Standard、Physical等資料
- 了解 PBR 粗糙度和金屬度
- 了解使用環境光、定向光、點光源和聚光燈進行照明。
- 使用透視和正交陰影相機了解陰影。
- 了解 Orbit、Trackball 和 Pointerlock 滑鼠和觸控互動控件
- 了解 GLTF、DRACO、OBJ、Texture、RGBE 等加載器
- 導入第三方glTF/glB動畫
- 使用 Raycaster 以及如何使用它來滑鼠拾取場景中的 3D 對象,
- 劍桿物理
- Rapier debug 渲染器
- 了解碰撞檢測的形狀
- 將我們的 Threejs 專案配置、部署並啟動到生產伺服器
- 搭配 Blender 光照與環境貼圖
- 安裝Nginx代理,指向網域名稱並安裝SSL
- 還有更多 Threejs 非常有用的例子
要求
- 可以安裝 VSCode、Git 和 NodeJS 的電腦
- 渴望使用 Threejs 和 TypeScript 編寫 3D Web 應用程式
課程說明
歡迎來到我的 Three.js 和 Typescript 課程。
Three.js 是一個 JavaScript library,可讓開發人員在網路上建立令人興奮且非常直覺的互動式 3D 內容。
TypeScript 引入了靜態類型檢查,這表示你可以明確定義變數、函數參數和傳回值的類型。 這可以捕獲開發過程中的潛在錯誤,使你的程式碼更加健壯和可靠。
TypeScript 還與現代 IDE 很好地整合,並提供智慧程式碼提示和自動完成功能。
Threejs 已為網際網路帶來非常有價值的資源,提供了數百萬種開發的可能性,但是許多新學習者在嘗試解密網路上的大量資源時,在學習的早期階段遇到了困難。
這就是本課程將能幫到你的地方。 首先你將從中學到如何使用 Threejs 和相關 addons library 的基本知識,隨著課程的進展,當下學得每個概念都將建立在之前所學之上,並漸進複雜,以便你了解每個新概念所面臨的問題。
因此,最後,你將具備如何建立自己的 Threejs 專案的許多需求,且能更好地理解官方範例。 如此在未來能夠自信地繼續自己建立更複雜的應用程式。
影片中演示的所有程式碼均在隨附文檔中提供,你可以免費在線上訪問,輕鬆複製和貼上並跟著教學進度參與。
如果你知道自己喜歡寫程式,喜歡看到程式為自己工作,喜歡嘗試,並且有數百萬個想要探索的想法,那麼這門課程就適合你。
有很多東西需要學習,但最終你將發展出建立自己的 Threejs 專案並更有效地參與 3D 開發人員社群所需的技術。
感謝你參加我的課程,希望在那裡見到你。
Sean
目標受眾
- 有興趣學習 Threejs 的人
- 有興趣學習 TypeScript 的人
- 對在網路上創建互動式 3D 應用程式、遊戲或視覺化感興趣的用戶
講師簡介
Sean Bradley 25 年軟體和網路工程師
你好,我是 Sean。
25+年來,我一直是一名 IT 工程師,在教育、航空、銀行、無人機、遊戲和電信行業構建和管理實時、低延遲、高可用性、非同步、多執行緒、遠端管理、全自動、受監控的解決方案。
我還創建並編寫了數百個開源 GitHub 貯存庫、媒體文章和 YouTube 視訊教程。
字幕:簡中、英文
- 想要了解如何將英文字幕自動翻譯成中文? 請參考這篇 How-To
- Udemy 永久擁有課程 大多課程約 NT400 (點擊連結看更多)
- ✨年訂閱每月 NT350( ⏳ 再獲得 20% off ) 🌈 悠遊 Udemy 的 26000+ 門課,最大化學習 ( 原價 NT635/月 )
- Udemy 現在越來越多課程有中文字幕,請參考 Soft & Share 中文線上課程
- 手機上點選優惠連結看到的價格比電腦上看到的貴
- $代表當地貨幣, 如在台灣為 NT
- 點選”報名參加課程”有可能因瀏覽器 cookies 轉久一點或回報錯誤而無法連上,請稍等刷新或重新點選就會出現
報名參加課程

也許你會有興趣
- Three.js 相關線上課程
- TypeScript 相關線上課程
- ★英語學習地圖 – 練好英文是最大的學習槓桿
- 如何找工作學習地圖 – 找工作不要靠運氣!
- 從 Soft & Share 各種社團頻道挑選你喜歡的加入
發表迴響