awesome-threejs

Awesome Threejs

3️⃣ 精選的 ThreeJS 資源列表

＃ 內容

• 核心

• 書籍

• 課程

• 文章

• 視頻

• 靈感

• 資源

• 工具

• 庫

• 社區

• 演示

• 其他 ＃ 核

• ThreeJS官網

• ThreeJS 示例

• ThreeJS 文檔

書籍

3D 理論

• 3D Math Primer for Graphics and Game Development：必讀書籍 熟悉 3D 數學。通過 @ZPostFacto & @Ian-Parberry

• Physically Based Rendering - From Theory to Implementation：PBR 概念方面的參考。一座金礦。通過 @mmp、@wjakob 和 @humper

創意編碼

• The Nature of Code：一位非常有趣的作者寫的一本很棒的書，講述了一堆基於 [@shiffman](https:// github.com/shiffman）

三個JS

• 發現三.js

• 學習 Three.js - 第三版

＃ 培訓班

三個JS

• ThreeJS Journey：一門很棒的課程，適合最初學者的程序員 想學習如何從頭開始製作 ThreeJS 3D 體驗。通過 @bruno_simon

著色器

• 學習 GLSL 的最簡單方法 通過 @iced_coffee_dev

• The Book of Shaders：掌握著色器之路的參考。而且是免費的。 通過 @patriciogv

文章

文檔

• ThreeJS 基礎知識

• OpenGL 著色器：關於 GLSL 的文檔

• GLSL 文檔

3D 理論

• 解釋齊次坐標和射影幾何： 很全面的齊次坐標和射影幾何的文章（終於明白什麼是4th 頂點著色器中的坐標 (w)）

教程

• Three.js 中的表面採樣：綜合 關於 MeshSurfaceSampler 的文章

• 如何使用 WebGL 創建假 3D 圖像效果: 一篇學習如何在 ThreeJS 中向 2D 圖像添加假深度的好文章。

• 矩陣教程：清晰的教程 了解著色器投影、視圖和模型矩陣（具有視覺衝擊力）

＃＃ 水

• 水焦散的實時渲染 焦散渲染的巧妙方法

• 實時流體模擬 很棒的文章，適合想要創建真正逼真的人水

生成藝術

• 生成藝術教程：非常棒的進化教程 通過 @rumyra 獲得一些關於生成藝術的知識 & @tholman

＃＃ 碰撞檢測

• 邊界體積碰撞檢測

• 基於物理的碰撞檢測

＃ 靈感

＃＃ 常見的

• same.energy：通過關鍵詞或圖片的視覺搜索引擎（有點像Pinterest）

• Pinterest：很好的靈感來源

著色器

• ShaderToy：準備好被這個著色器共享平台震撼吧。

影片

著色器

• ShaderShop 視頻：一些關於 ShaderShop 的精彩視頻等等。 通過 @mandy3284

＃ 資源

墊帽

• Matcap 存儲庫

3D 資產

• Poliigon：3D 藝術家的資產（紋理、模型、HDRI）

• Poly Haven：公共 CC0 3D 資源庫（紋理、模型、HDRI）

紋理

• 3D 紋理：具有漫反射、法線、位移、遮擋、鏡面反射的免費 PBR 紋理 和粗糙度圖。

• Arroway Textures：用於 3D 渲染和實時使用的數字紋理。

• ambientCG: - 用於基於物理的渲染的 CC0 紋理

GLSL 著色器

＃＃＃ 主要的

• 信號整形函數：一組有用的信號整形模式（以 @iquilezles 轉換為 GLSL）

• 整形函數: 一組很棒的著色器整形函數 通過 @golan

• 曲線備忘單：關於如何製作一些信號的快速提醒 @kyndinfo 的模式

• GLSL Noises: 別人編碼的噪音，所以你 可以直接在你的著色器中使用它們來獲得很酷的效果（包括：Perlin 噪聲）

• 逼真的水著色器 還有一些鏈接解釋了方法 ＃＃＃ 其他

• PixelSpirit Elements Deck：這是學習GLSL著色器的塔羅牌。每個 PixelSpirit 卡都有一個視覺元素及其 GLSL 著色器代碼。這些卡片按從最簡單到最複雜的順序排列，構建了一個代碼函數庫，這些函數庫像一本咒語書一樣組合在一起，形成了一種無限的視覺語言。通過 @patriciogv

  • PixelSpirit GitHub 與 @patriciogv 的 PixelSpirit Elemens Deck 相關的庫

＃ 工具

場景創建

• Polygonjs: 基於節點的WebGL設計工具，用於程序幾何、粒子、材質 和動畫。

3D建模

• Blender：免費且功能強大，可創建您自己的 3D 資產。很多導出文件擴展名 可用。

• Houdini：創建程序 3D 資產。免費許可“Houdini 學徒” 可以用來學習（禁止商用）

• Spline：一種很有前途的協作式 3D 建模工具。

＃＃ 材料

• Adobe Substance3D 套件

立方體紋理

• HDRI-to-CubeMap：一種將 HDRI 文件轉換為立方體貼圖的工具 可以在 ThreeJS 中作為 CubeTexture 加載。通過 @matheowis

著色器

###在線工具

• GraphToy：強大的工具，可以讓你的大腦環繞並測試 GLSL 中的整形信號 通過 @iquilezles

• ShaderShop 編輯器：具有視覺衝擊力的編輯器，用於塑造 信號，通過拖放模式。（非常棒）來自 @mandy3284

安裝的工具

• glslViewer：用於 2D/3D 著色器的基於控制台的 GLSL 沙箱，由 @patriciogv 提供。它經過其創建者的實戰測試，能夠構建與目標平台無關的創意管道，並且可以非常快速地迭代，並且在製作著色器創意草稿時摩擦更少。您工具包中的必備品。

沙箱

• codesandbox：用於實驗和與人分享的沙盒。ThreeJS模板可以很方便 成立。

• codepen：發現很難為 ThreeJS x Typescript 配置，但是一個很好的沙箱來嘗試新的 事物。

• threejs-editor：一個很好的工具，例如，可以嘗試你的 Blender 導出以及它們是如何導出的 將在 ThreeJS 中做出反應。

託管

• vercel：託管項目的簡單工具，個人/愛好者類型的項目免費。

庫

GLSL/HLSL 著色器

• lygia：一個顆粒狀的多語言著色器庫，由 @patriciogv 設計，旨在提高性能和靈活性。一個跨平台庫，可幫助您非常輕鬆地迭代著色器。深入研究特定功能的代碼也可以幫助您學習 GLSL/HLSL。

相關框架

反應

• react-three-fiber：一種處理 ThreeJS 內容的聲明方式 由 @pmndrs 做出反應

• drei：@pmndrs 的 react-three-fiber 的有用助手

角度

• angular-three：受 r3f 啟發的用於 Angular 生態系統的聲明式 ThreeJS 通過 @nartc

視圖

• trois：相當於 @troisjs 的 VueJS r3f

苗條

• threlte：Svelte 的 three.js 組件庫。

• svelte-cubed：Svelte 的聲明式 ThreeJS 通過 @Rich-Harris

##物理

• @pmndrs cannon-es

• Ammo.js

• Oimo.js

• Rapier @dimforge

空間查詢和光線投射

• three-mesh-bvh by @gkjohnson：檢查碰撞的高效方法並通過使用邊界體積層次結構來加速光線投射。（真的是您工具包中的必備品）

建設性的立體幾何

• three-bvh-csg by @gkjohnson：一種靈活、內存緊湊、快速以及在 three-mesh-bvh 之上的動態 CSG 實現。（用於在網格之間執行一些布爾運算的神奇工具，如交集、差分......）

＃＃ 尋找路徑

• Pathfinging.js 具有大量設置的有用庫

• Three-pathfinging Three.js 導航插件

• Kompute 易於使用的轉向庫

＃＃ 人物

• ossos 一個完整的網絡角色蒙皮和動畫庫

• mannequin.js 程序字符生成庫。包括電樞

示範

＃＃ 水

• fft-ocean Three.js 的快速傅里葉變換海洋渲染

• skunami.js 具有逼真的水互動的奇妙項目

• Shallow water 展示水波紋效果的Demo項目

＃＃ 碰撞檢測

• 軸對齊邊界框 基於 AABB 的碰撞檢測

• 基於光線的碰撞檢測

＃ 社區

＃＃ 核

• Stackoverflow ThreeJS：您可以提出問題的論壇（ 之前一定要搜索好）

• 官方 ThreeJS Discord

• ThreeJS 官方論壇

• 官方 Slack

• 官方推特

• 官方 Reddit ＃ 貢獻

歡迎投稿！首先閱讀 貢獻指南。

或者你可以在 Twitter 上聯繫我：

相關列表

• awesome-glsl - 精選的 GLSL 資源列表。

• awesome-webgl - 精選的 WebGL 庫、資源和 多得多。

• awesome-webgpu - 很棒的 WebGPU 資源的精選列表。

• awesome-opengl - 精選的 OpenGL 庫、調試器和 資源。

• awesome-creative-coding - 精心策劃的精彩列表 主要針對初學者/中級的創意編碼資源。

• awesome-computer-vision - 很棒的計算機精選列表 視覺資源。

• awesome-vulkan - 精選的 Vulkan 項目和生態系統列表。

• gamedev - 關於遊戲開發的精彩列表。

• graphics-resources - 圖形編程資源列表。