Contents
學習 Threejs、TypeScript 和 NodeJS 在 Web 上創建互動式 3D 內容。
從這 9.5 小時的課程,你會學到
- 通過許多演示和示例程式碼了解 Threejs 的基礎知識
- 使用 VSCode、Git 和 NodeJS 設置開發環境
- 安裝 TypeScript
- 使用 npm 創建 Threejs 專案並打包 json
- 了解 Webpack、NodeJS、Express 以及為瀏覽器客戶端提供 ES6 模組
- 創建(或可選地安裝)Threejs TypeScript 樣板以供整個課程使用
- 了解 Threejs 場景、相機和渲染器
- 了解動畫迴圈
- 了解 Stats 和 Dat GUI 面板
- 了解 Object3D base class,以及旋轉、位置、縮放、可見性和矩陣屬性
- 了解幾何體,例如長方體、球體、二十面體、平面、TorusKnot 等
- 了解 Basic、Normal、Lambert、Phong、Standard、Physical、Matcap 和其他材料
- 了解 SpecularMap、RoughnessMap 和 MetalnessMap 的突出顯示選項
- 了解凹凸貼圖和置換貼圖
- 了解如何使用材質選項修改紋理和置換貼圖 UV。
- 了解使用環境光、定向光、半球光、點光和聚光燈的照明。
- Mipmap、自定義 Mipmap 和各向異性過濾
- 了解使用透視和正交陰影相機的陰影。
- 了解 Orbit、Trackball 和 Pointerlock 鼠標和觸摸互動控件
- 了解模型加載器,例如 OBJ、MTL、GLTF、DRACO 等
- 導入第三方 FBX 和 glTF/glB 動畫
- 創建自定義動畫並從 Blender 導出為 glTF/glB
- 使用 Raycaster 以及如何使用它在場景中鼠標拾取 3D 物件
- Cannonjs 物理
- Cannonjs 除錯渲染器( Debug Renderer )
- 了解用於碰撞檢測的凸多面體( ConvexPolyhedrons )之於複合形狀
- 向生產伺服器提供、部署和啟動我們的 Threejs 專案
- 安裝 Nginx 代理,指向域名並安裝 SSL
- Webpack 中使用模組指標( Module Specifiers )之於相對輸入參考
- 還有更多非常有用的 Threejs 示例
要求
- 可以安裝 VSCode、Git 和 NodeJS 的電腦
- 渴望使用 Threejs 和 TypeScript 編寫 3D Web 應用程式
課程說明
歡迎來到我的 Three.js 和 Typescript 課程。
在本課程中,我們將學習所有關於 Three.js 的知識,用 TypeScript 編寫它,並使用 Webpack 和 NodeJS 編寫 HTML 客戶端和伺服器組合元件。
該課程分為5個主要部分:
- 設置開發環境並安裝TypeScript
- 創建一個 Three.js 樣板專案。 這部分是可選的,你可以在第 3 部分替代地安裝一個預建構好的整個網站或系統的架構的模板(boilerplate),但是從頭開始手動建構它會讓你很好地理解從頭開始創建新的 Three.js 專案所涉及的各個方面。
- 安裝 Threejs 課程模板,以防你沒有在第 2 部分中手動創建它。
- 從核心到在更高級的示例中使用它並涉及其他第三方 libraries ,全面了解 Three.js 的方方面面。
- 部署到生產。 我們將探討你在網際網路上公開託管你的 Threejs 專案的幾種不同選擇。
隨附文檔中提供了所有程式碼,以便你可以輕鬆複製和貼上,以防你不想暫停視訊並從螢幕上複製。 文檔鏈接位於每個影片旁邊的資源中。
TypeScript 在我們的程式碼中引入了類型安全( type safety ),這使其更加健壯,並為 IDE 提供了額外的工具,例如智能,我們可以使用它來幫助我們更準確、更快地查找和理解可用的 Threejs 屬性和方法以及程式碼。
感謝你參加我的課程,我們會在那裡見到你。
Sean
目標受眾
- 有興趣學習 Threejs 的人
- 有興趣學習 TypeScript 的人
- 對在網路上創建互動式 3D 應用程式、遊戲或視覺化感興趣的用戶
- 想要充分了解 Threejs、TypeScript 和 NodeJS 以使其有用的人
講師簡介
Sean Bradley 20 年軟體和網路工程師
你好,我是 Sean。
20 多年來,我一直是一名 IT 工程師,在教育、航空、銀行、無人機、遊戲和電信行業構建和管理實時、低延遲、高可用性、非同步、多執行緒、遠端管理、全自動、受監控的解決方案。
我還創建並編寫了數百個開源 GitHub 貯存庫、媒體文章和 YouTube 視訊教程。
英文字幕:有
- 想要了解如何將英文字幕自動翻譯成中文? 請參考這篇 How-To
🙌 如何有效率地管理 ChatGPT 輸出與整理自己的 ChatGPT 提示( prompts )使用情境?LN+ for Web 已經針對 ChatGPT 的整合做最佳化
🙌 讓 Notion AI 成為你線上學習的得力助手,詳細操作請參考 – 使用 Notion AI 功能來為 udemy 的課程做摘要總結
- 點選這個✨優惠連結 課程特價 | Udemy 永久擁有課程 NT370 起( 請登入 Udemy|按過“優惠連結”後到”報名參加課程“連結網頁做更新 )
- Udemy 現在越來越多課程有中文字幕,請參考 Soft & Share 中文線上課程
- 手機上點選優惠連結看到的價格比電腦上看到的貴
- $代表當地貨幣, 如在台灣為 NT
- 點選”報名參加課程”有可能因瀏覽器 cookies 轉久一點或回報錯誤而無法連上,請稍等刷新或重新點選就會出現
報名參加課程


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