awesome-threejs
Last updated
Last updated
3️⃣ 精選的 ThreeJS 資源列表
＃ 內容
其他 ＃ 核
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）
＃ 培訓班
ThreeJS Journey：一門很棒的課程，適合最初學者的程序員 想學習如何從頭開始製作 ThreeJS 3D 體驗。通過 @bruno_simon
The Book of Shaders：掌握著色器之路的參考。而且是免費的。 通過 @patriciogv
OpenGL 著色器：關於 GLSL 的文檔
解釋齊次坐標和射影幾何： 很全面的齊次坐標和射影幾何的文章（終於明白什麼是4th 頂點著色器中的坐標 (w)）
Three.js 中的表面採樣：綜合 關於 MeshSurfaceSampler 的文章
如何使用 WebGL 創建假 3D 圖像效果: 一篇學習如何在 ThreeJS 中向 2D 圖像添加假深度的好文章。
矩陣教程：清晰的教程 了解著色器投影、視圖和模型矩陣（具有視覺衝擊力）
＃＃ 水
＃＃ 碰撞檢測
＃ 靈感
＃＃ 常見的
same.energy：通過關鍵詞或圖片的視覺搜索引擎（有點像Pinterest）
Pinterest：很好的靈感來源
ShaderToy：準備好被這個著色器共享平台震撼吧。
ShaderShop 視頻：一些關於 ShaderShop 的精彩視頻等等。 通過 @mandy3284
＃ 資源
Poliigon：3D 藝術家的資產（紋理、模型、HDRI）
Poly Haven：公共 CC0 3D 資源庫（紋理、模型、HDRI）
3D 紋理：具有漫反射、法線、位移、遮擋、鏡面反射的免費 PBR 紋理 和粗糙度圖。
Arroway Textures：用於 3D 渲染和實時使用的數字紋理。
ambientCG: - 用於基於物理的渲染的 CC0 紋理
＃＃＃ 主要的
信號整形函數：一組有用的信號整形模式（以 @iquilezles 轉換為 GLSL）
GLSL Noises: 別人編碼的噪音，所以你 可以直接在你的著色器中使用它們來獲得很酷的效果（包括：Perlin 噪聲）
逼真的水著色器 還有一些鏈接解釋了方法 ＃＃＃ 其他
PixelSpirit Elements Deck：這是學習GLSL著色器的塔羅牌。每個 PixelSpirit 卡都有一個視覺元素及其 GLSL 著色器代碼。這些卡片按從最簡單到最複雜的順序排列，構建了一個代碼函數庫，這些函數庫像一本咒語書一樣組合在一起，形成了一種無限的視覺語言。通過 @patriciogv
PixelSpirit GitHub 與 @patriciogv 的 PixelSpirit Elemens Deck 相關的庫
＃ 工具
Polygonjs: 基於節點的WebGL設計工具，用於程序幾何、粒子、材質 和動畫。
Blender：免費且功能強大，可創建您自己的 3D 資產。很多導出文件擴展名 可用。
Houdini：創建程序 3D 資產。免費許可“Houdini 學徒” 可以用來學習（禁止商用）
Spline：一種很有前途的協作式 3D 建模工具。
＃＃ 材料
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：託管項目的簡單工具，個人/愛好者類型的項目免費。
lygia：一個顆粒狀的多語言著色器庫，由 @patriciogv 設計，旨在提高性能和靈活性。一個跨平台庫，可幫助您非常輕鬆地迭代著色器。深入研究特定功能的代碼也可以幫助您學習 GLSL/HLSL。
react-three-fiber：一種處理 ThreeJS 內容的聲明方式 由 @pmndrs 做出反應
angular-three：受 r3f 啟發的用於 Angular 生態系統的聲明式 ThreeJS 通過 @nartc
threlte：Svelte 的 three.js 組件庫。
svelte-cubed：Svelte 的聲明式 ThreeJS 通過 @Rich-Harris
##物理
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：您可以提出問題的論壇（ 之前一定要搜索好）
官方 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 - 圖形編程資源列表。
