fbpx

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個主要部分:

  1. 設置開發環境並安裝TypeScript
  2. 創建一個 Three.js 樣板專案。 這部分是可選的,你可以在第 3 部分替代地安裝一個預建構好的整個網站或系統的架構的模板(boilerplate),但是從頭開始手動建構它會讓你很好地理解從頭開始創建新的 Three.js 專案所涉及的各個方面。
  3. 安裝 Threejs 課程模板,以防你沒有在第 2 部分中手動創建它。
  4. 從核心到在更高級的示例中使用它並涉及其他第三方 libraries ,全面了解 Three.js 的方方面面。
  5. 部署到生產。 我們將探討你在網際網路上公開託管你的 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 轉久一點或回報錯誤而無法連上,請稍等刷新或重新點選就會出現

報名參加課程

Sponsored by Udemy


也許你會有興趣

不受 FB 演算法影響,歡迎透過 e-mail 訂閱網站更新

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料

Powered by WordPress.com.

Up ↑

%d 位部落客按了讚: