Three.js 和 TypeScript

學習 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 轉久一點或回報錯誤而無法連上,請稍等刷新或重新點選就會出現

報名參加課程

Sponsored by Udemy


也許你會有興趣

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

發表迴響

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

由 WordPress.com 建置.

Up ↑

探索更多來自 Soft & Share 的內容

立即訂閱即可持續閱讀,還能取得所有封存文章。

Continue reading