Welcome to the Missing Manual for three.js!
Take Your Websites into the Third Dimension with DISCOVER three.js
Discover three.js Is an Exciting New Book Being Written One of the Core Three.Js Developers, Coming Very Soon!
Stay up to Date
Enter Your Email Here
What is three.js?
Take a look at the three.js homepage for a frequently updated 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 a 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
Mathematical and 3D concepts are clearly explained throughout the book using hundreds of original 2D 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!
Fourteen entire chapters are included here which will bring you up to speed with all the basic 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!
What Are You Waiting For? Dive Right in and See What Discover three.js Has to Offer Now, Completely Free!
- Welcome to the Missing Manual for 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
- So You Need Help? 0.3
- Dealing with Different three.js Versions, Without the Pain 0.4
- Live Code Examples, and How to Fix Errors in Your Code 0.5
- 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
- Components, Helpers, and Inheritance 2
- Welcome to the Future: ES6 Classes 2.1
- A Bullet-Proof Reusable App 2.2
- What Lies Beneath: Introducing the Object3D Base Class 2.3
- On the Shoulders of Giants: Inheritance in three.js 2.4
- The Scene Graph and the Scene Object 2.5
- Visualizing the Invisible: Helper Gizmos 2.6
- Adding Interactivity to Our Scene with Event Listeners 2.7
- A Brief Look at the Math Class 2.8
- Cameras 3
- Working with the PerspectiveCamera 3.1
- Creating 2D Scenes and Overlays: The OrthographicCamera 3.2
- Camera Controls Part Two: MapControls, FirstPersonControls, PointerLockControls 3.3
- Materials And Textures 4
- Materials And Textures 4
- Common Material Properties And Methods 4.1
- Fast, but OldSchool: MeshBasicMaterial, MeshLambertMaterial, MeshPhongMaterial, and MeshToonMaterial 4.2
- Physically Based Rendering with MeshStandardMaterial and MeshPhysicalMaterial 4.3
- A Brief intro to Writing Shaders With three.js: ShaderMaterial and RawShadeMaterial 4.4
- Adding Realism with Environment Maps 4.5
- Working with Transparent Materials and Textures 4.9
- Lights and Shadows 5
- Loading and Working with Textures, and Preparing Textures for Use in Your Scenes 5.1
- Working with Lights 6.1
- Basic Light Setups 6.2
- Introducing Shadows 6.3
- Understanding Geometry 7
- Basic Geometry Concepts: Vertices, Normals and UVs 7.1
- Creating A Custom Geometry 7.2
- Lines, Shapes, and Text 8
- Throwing Shapes: Recreating the 2D Canvas API in 3D 8.1
- Rendering Your Scene With WebGL 9
- The WebGLRenderer in Depth 9.1
- Rendering Offscreen to a WebGLRendererTarget 9.2
- Animating Your Scenes 10
- Working with the Animation System 10.1
- Introducing Morph Targets 10.2
- Bones, Skinning, and Skeletal Animation 10.3
- Post-Processing, Shaders, and Effects 11
- Adding Post-Processing To A Scene 11.1
- A Big List of all the Post Effects (currently) Available in three.js 11.2
- Antialiasing A Post-Processed Scene 11.2
- Working with Other Applications 12
- Preparing Models for Export from Modelling Applications 12.1
- Converting FBX, OBJ and DAE files to glTF Format 12.2
- The LoadingManager 12.3
- Exporting Your Scene in glTF Format 12.4
- Loaders for Other Formats: FBX, Collada, and OBJ 12.5
- Sound in a 3-Dimensional World 13
- The WebAudio API 13.1
- Positional Sound 13.1
- Points, Particles Systems, and Sprites 14
- Sprites 14.1
- Particle Systems 14.2
- Text in 3D: The FontLoader and TextBufferGeometry 8.2
- References and Resources