Three.js 和 TypeScript

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