Our Pledge

In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.

Our Standards

Examples of behavior that contributes to creating a positive environment include:

• Using welcoming and inclusive language

• Being respectful of differing viewpoints and experiences

• Gracefully accepting constructive criticism

• Focusing on what is best for the community

• Showing empathy towards other community members

Examples of unacceptable behavior by participants include:

• The use of sexualized language or imagery and unwelcome sexual attention or advances

• Trolling, insulting/derogatory comments, and personal or political attacks

• Public or private harassment

• Publishing others' private information, such as a physical or electronic address, without explicit permission

• Other conduct which could reasonably be considered inappropriate in a professional setting

Our Responsibilities

Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.

Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.

Scope

This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.

Enforcement

Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at . All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.

Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.

Attribution

This Code of Conduct is adapted from the Contributor Covenant, version 1.4, available at http://contributor-covenant.org/version/1/4

Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.

Ensure your pull request adheres to the following guidelines:

• Make sure that your submission is really awesome. Awesome lists are curations of the best, not everything.

• Try to add a short description of the link you are adding by following the convention. Try to credit the author(s) by linking a Twitter/GitHub profile (or website/portfolio):

For example

- [Name of the resource](<link>): <short description> by [@<author1 nickname>](<link to author1 profile>) & [@<author2 nickname>](<link to author2 profile>)

• Choose the best link of all, that makes the navigation and the understanding of the resource the easiest possible. (i.e. prefer linking a GitHub repository over its demo link, moreover if the demo does no link back to the repository. The demo link is certainly linked anyway in the repo)

• Ensure that your submission is in the right category. If it does not fit anywhere, propose a new category or sub-category that we will review in the PR.

Thank you for your suggestions!

Updating your PR

A lot of times, making a PR adhere to the standards above can be difficult. If the maintainers notice anything that we'd like changed, we'll ask you to edit your PR before we merge it. There's no need to open a new PR, just edit the existing one. If you're not sure how to do that, here is a guide on the different ways you can update your PR so that we can merge it.

Awesome Threejs

3️⃣ 精選的 ThreeJS 資源列表

＃ 內容

• ＃ 核

書籍

3D 理論

創意編碼

三個JS

＃ 培訓班

三個JS

著色器

文章

文檔

3D 理論

教程

＃＃ 水

生成藝術

＃＃ 碰撞檢測

＃ 靈感

＃＃ 常見的

著色器

影片

著色器

＃ 資源

墊帽

3D 資產

紋理

GLSL 著色器

＃＃＃ 主要的

＃ 工具

場景創建

3D建模

＃＃ 材料

立方體紋理

著色器

###在線工具

安裝的工具

沙箱

託管

庫

GLSL/HLSL 著色器

相關框架

反應

角度

視圖

苗條

##物理

空間查詢和光線投射

建設性的立體幾何

＃＃ 尋找路徑

＃＃ 人物

示範

＃＃ 水

＃＃ 碰撞檢測

＃ 社區

＃＃ 核

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

相關列表

Awesome Threejs

3️⃣ A curated list of awesome ThreeJS resources

Contents

• Core

• Books

• Courses

• Articles

• Videos

• Inspiration

• Resources

• Tools

• Libraries

• Community

• Demonstrations

• Others

Core

• ThreeJS official website

• ThreeJS examples

• ThreeJS documentation

Books

3D Theory

• 3D Math Primer for Graphics and Game Development: A must-read book to be comfortable with 3D maths. by @ZPostFacto & @Ian-Parberry

• Physically Based Rendering - From Theory to Implementation: A reference in term of PBR concepts. A gold mine. by @mmp, @wjakob & @humper

Creative Coding

• The Nature of Code: Amazing book by a very funny author about a bunch of stuff to make experiences more natural based on the Processing language by @shiffman

ThreeJS

• Discover three.js

• Learn Three.js - Third Edition

Courses

ThreeJS

• ThreeJS Journey: A great course accessible for the most beginner programmer who wants to learn how to make ThreeJS 3D experiences from scratch. by @bruno_simon

Shaders

• The Easiest Way to Learn GLSL by @iced_coffee_dev

• The Book of Shaders: A reference on the road to master shaders. And it's free. by @patriciogv

Articles

Documentation

• ThreeJS Fundamentals

• Shaderific for OpenGL: Documentation on GLSL

• GLSL documentation

3D Theory

• Explaining Homogeneous Coordinates & Projective Geometry: A very comprehensive article on homogeneous coordinates and projective geometry (To finally understand what is the 4th coordinate (w) in your vertex shaders)

Tutorials

• Surface Sampling in Three.js: A comprehensive article about MeshSurfaceSampler

• How to Create a Fake 3D Image Effect with WebGL: A good article to learn how to add a fake depth to a 2D image in ThreeJS.

• Tutorial on Matrices: A limpid tutorial to understand shader projection, view and model matrices (visually impactful)

Water

• Real-time rendering of water caustics Clever approach to caustics rendering

• Realtime fluid simulation Awesome article for the ones that want to create truly realistic water

Generative Art

• generative artistry tutorials: Really awesome evolutive tutorial to acquire some knowledge on Generative Art by @rumyra & @tholman

Collision detection

• Bounding volume collision detection

• Physics based collision detection

Inspiration

Common

• same.energy: Visual search engine by keyword or picture (a bit like Pinterest)

• Pinterest: Good source of inspiration

Shaders

• ShaderToy: Prepare to be blown away by this shader sharing platform.

Videos

Shaders

• ShaderShop videos: Some awesome videos about ShaderShop and more. by @mandy3284

Resources

Matcaps

• Matcap repository

3D assets

• Poliigon: Assets for 3D artists (Textures, Models, HDRI)

• Poly Haven: Public CC0 3D Asset Library (Textures, Models, HDRI)

Textures

• 3D textures: Free PBR textures with Diffuse, Normal, Displacement, Occlusion, Specularity and Roughness Maps.

• Arroway Textures: Digital textures for 3D rendering and real-time use.

• ambientCG: - CC0 textures for Physically Based Rendering

GLSL Shaders

Main

• Signal shaping functions: A useful set of signal shaping patterns (to convert into GLSL) by @iquilezles

• Shaping functions: Awesome set of shaping functions for shaders by @golan

• Cheat sheet on curves: A quick reminder on how to make some signal patterns by @kyndinfo

• GLSL Noises: Noises coded by others so you can use them directly in your shaders for cool effects (included: Perlin noises)

• Realistic water shader There are also some links with explanation of the approach

Other

• PixelSpirit Elements Deck: This is a tarot deck for learning GLSL shaders. Each PixelSpirit card has a visual element and its GLSL shader code. The cards are ordered from simplest to most complex, building a library of code functions that combine like a book of spells to form an infinite visual language. by @patriciogv

  • PixelSpirit GitHub Library associated with the PixelSpirit Elemens Deck by @patriciogv

Tools

Scene Creation

• Polygonjs: Node-based WebGL design tool, used for procedural geometry, particles, materials and animation.

3D modeling

• Blender: Free and powerful to create your own 3D assets. A lot of export file extensions are available.

• Houdini: To create procedural 3D assets. The free licence "Houdini Apprentice" can be used to learn (no commercial usage)

• Spline: A promising tool for 3D modeling, collaboratively.

Materials

• Adobe Substance3D Suite

Cube Texture

• HDRI-to-CubeMap: A tool to convert your HDRI file into a Cube map that can be load as a CubeTexture in ThreeJS. by @matheowis

Shaders

Online tools

• GraphToy: Powerful tool to wrap your head around and test shaping signals in GLSL by @iquilezles

• ShaderShop editor: Visually impactful editor to work on shaping signals, by drag and dropping patterns. (Mindblowingly awesome) by @mandy3284

Installed tools

• glslViewer: Console-based GLSL Sandbox for 2D/3D shaders by @patriciogv. Battle-tested by its creator, it enables to build a creative pipeline agnostic to the target platform and to iterate very fast and with less frictions for making a draft of your shaders ideas. A must-have in your toolkit.

Sandbox

• codesandbox: Sandbox to experiment and share with people. ThreeJS template can be easily found.

• codepen: Found it hard to configure for ThreeJS x Typescript, but a good sandbox to try out new things.

• threejs-editor: A nice tool to, for example, try out your Blender exports and how they will react in ThreeJS.

Hosting

• vercel: Easy tool to host your projects, and free for a personal/hobbyist type of projects.

Libraries

GLSL/HLSL Shaders

• lygia: a granular and multi-language shader library designed for performance and flexibility by @patriciogv. A cross platform library that will help you iterate on your shaders very easily. Going deep in the code of a specific functionality can also help you learn GLSL/HLSL.

Related Frameworks

React

• react-three-fiber: A declarative way of handling your ThreeJS stuff for React by @pmndrs

• drei: Useful helpers for react-three-fiber by @pmndrs

Angular

• angular-three: Declarative ThreeJS inspired by r3f for the Angular ecosystem by @nartc

Vue

• trois: The equivalent of r3f for VueJS by @troisjs

Svelte

• threlte: A three.js component library for Svelte.

• svelte-cubed: Declarative ThreeJS for Svelte by @Rich-Harris

Physics

• cannon-es by @pmndrs

• Ammo.js

• Oimo.js

• Rapier by @dimforge

Spatial querying & Raycasting

• three-mesh-bvh by @gkjohnson: Highly effective way to check for collisions and to accelerate raycasting by the usage of bounding volume hierarchy. (Really a must have in your toolkit)

Constructive Solid Geometry

• three-bvh-csg by @gkjohnson: A flexible, memory compact, fast and dynamic CSG implementation on top of three-mesh-bvh. (Amazing tool to perform some Boolean operations between meshes like intersection, difference, ...)

Pathfinding

• Pathfinging.js Useful library with tons of settings

• Three-pathfinging Three.js plugin for navigation

• Kompute Easy to use steering library

Characters

• ossos A complete character skinning & animation library for the web

• mannequin.js Library for procedural character generation. Armature included

Demonstrations

Water

• fft-ocean Fast Fourier Transform ocean rendering for Three.js

• skunami.js Marvellous project with realistic water interaction

• Shallow water Demo project that shows water ripple effect

Collision detection

• Axis-Aligned Bounding Boxes AABB based collision detection

• Raycast based Collision detection

Community

Core

• Stackoverflow ThreeJS: Forum where you can ask your questions ( be sure to search well before)

• Official ThreeJS Discord

• Official ThreeJS Forum

• Official Slack

• Official Twitter

• Official Reddit

Contribute

Contributions welcome! Read the contribution guidelines first.

Or you can reach me on Twitter:

Related Lists

• awesome-glsl - A curated list of awesome GLSL resources.

• awesome-webgl - A curated list of awesome WebGL libraries, resources and much more.

• awesome-webgpu - A curated list of awesome WebGPU resources.

• awesome-opengl - A curated list of awesome OpenGL libraries, debuggers and resources.

• awesome-creative-coding - A carefully curated list of awesome creative coding resources primarily for beginners/intermediates.

• awesome-computer-vision - A curated list of awesome computer vision resources.

• awesome-vulkan - A curated list of awesome Vulkan projects and ecosystem.

• gamedev - A awesome list about game development.

• graphics-resources - A list of graphic programming resources.