Welcome to the Missing Manual for three.js!
Discover three.js is an exciting new book being written by one of the core three.js developers, coming very soon!
While you're waiting, jump right into Section One, which is a completely free standalone tutorial series that will introduce you to all the important concepts needed to create a modern three.js application.
Stay up to Date - Enter Your Email Here
What is three.js?
Take a look at the three.js homepage for a showcase of some of the incredible work being done with this amazing tool.
What You'll be Doing
Each section is divided up into several chapters, each of which is a short, self-contained lesson. Section One introduces all the foundational concepts, and once completed, you can go through the other sections in any order.
Each section introduces and teaches the concepts by guiding you to create small example applications in which we'll explore real-world scenarios.
Live Code Examples
Each chapter has one or more carefully crafted live code example, embedded and editable right in the page using CodeSandbox.io.
Code from every example used in the book is freely available and MIT licensed (free to use, change, edit, sell or share) on Github.
Clear 2D Diagrams
Concepts and techniques are clearly explained throughout the book using hundreds of original diagrams.
Always up to Date
There is a new version of three.js released nearly once per month. Traditional print books just can't keep up with this rapid release cycle and will be out of date nearly as soon as they are released.
Discover three.js is 100% online and updated to work with every new release of three.js. So you never need to worry that what you read won't work with the latest version!
The entire first two sections of the book are available for free, right here!
The Introduction and Section One make a completely free, standalone tutorial series that will introduce you to all the important concepts and terminology that you'll need to go deeper in your explorations of 3D web graphics, including animation, lighting, camera controls, photorealistic materials and textures, and lots more!
- Welcome to Discover three.js! 0
- So What Do You Need to Run a three.js App Anyway? 0.1
- three.js on GitHub - Where the Magic Happens! 0.2
- Welcome to the Community: three.js Around the Web 0.3
- Dealing with Different three.js Versions, Without the Pain 0.4
- Live Code Examples with CodeSandBox.io 0.5
- How to Include three.js in Your Projects 0.6
- HTML and CSS Used in This Book 0.7
- Functions Built-In to Your Browser: the Document Object Model 0.10
- Getting Started: Here's Where the Real Fun Begins! 1
- Your First three.js Scene: Hello, Cube! 1.1
- Lights! Color! Action! 1.2
- Improving Our Animation Loop and Adding Automatic Resizing 1.3
- A Brief Introduction to Texture Mapping 1.4
- Camera Controls and Global Illumination 1.5
- Getting Creative with Shapes and Transformations 1.6
- Loading External Models 1.7
- Welcome to the Future: Classes, Modules, Promises and More 2
- A Bullet-Proof Reusable App 2.2
- Using three.js with package managers such as NPM and Yarn 2.4
- Components, Helpers, and Inheritance 3
- The Object3D Base Class and Inheritance in three.js 3.1
- The Scene Graph and the Scene Object 3.2
- Visualizing the Invisible: Helper Objects 3.3
- Textures, Models, Sounds, Fonts: Handling Assets Gracefully 4
- Using Promises and async/await with three.js Loaders 4.1
- A Secret Weapon: Introducing Draco Compression 4.2
- The three.js LoadingManager 4.3
- The Built-In three.js Asset Caching System 4.4
- Cameras 5
- Working with the PerspectiveCamera 5.1
- Creating 2D Scenes and Overlays: The OrthographicCamera 5.2
- Interactivity 6
- Adding Interactivity to Our Scene with Event Listeners 6.1
- Camera Controls: You've Seen OrbitControls, Now What About the Rest? 6.2
- Picking Objects in Our Scene with the Raycaster 6.3
- Lighting and Shadows 7
- Physically Correct Lighting 7.1
- Working with the three.js Lights 7.2
- Introducing Shadows 7.3
- Materials 8
- Shading Models Used by the Built-In Materials 8.1
- Common Material Properties And Methods 8.2
- Physically Based Rendering with MeshStandardMaterial and MeshPhysicalMaterial 8.3
- Fast, but OldSchool: MeshBasicMaterial, MeshLambertMaterial, MeshPhongMaterial, and MeshToonMaterial 8.4
- Specialty Materials: MeshDepthMaterial and MeshNormalMaterial 8.5
- Working with Textures 9
- Loading and Working with Textures, and Preparing Textures for Use in Your Scenes 9.1
- Adding Realism with Environment Maps 9.2
- MeshStandardMaterial and the Metal/Rough Workflow 9.3
- MeshPhongMaterial and the Specular Workflow 9.4
- Bump, Normal, and Displacement Maps 9.5
- Two Ways of Approaching Transparency 9.6
- Emissive, Light, and Ambient Occlusion Maps 9.7
- Understanding Geometry 10
- Basic Geometry Concepts: Vertices, Normals and UVs 10.1
- Creating A Custom Geometry 10.2
- Points, Particles Systems, and Sprites 11
- Particle Systems 11.1
- Introducing Sprites 11.2
- Lines, Shapes, and Text 12
- Throwing Shapes: Recreating the 2D Canvas API in 3D 12.1
- Text in 3D: The FontLoader and TextBufferGeometry 12.2
- Rendering Your Scenes with WebGL 13
- The WebGLRenderer in Depth 13.1
- Rendering Offscreen to a WebGLRendererTarget 13.2
- Animating Your Scenes 14
- Unraveling the Animation System 14.1
- Introducing Morph Targets 14.2
- Bones, Skinning, and Skeletal Animation 14.3
- Post-Processing, Shaders, and Effects 15
- Adding Post-Processing To A Scene 15.1
- Anti-Aliasing A Post-Processed Scene 15.2
- A Big List of all the Post Effects (currently) Available in three.js 15.3
- Sound in a 3-Dimensional World 16
- The WebAudio API 16.1
- Positional Sound 16.1
- References and Resources
All the tips, tricks, caveats, gotchas and performance suggestions you could shake a big stick at. Make sure to check them out!