Get ready to DISCOVER three.js!
Discover three.js is an exciting new book being written by one of the core three.js developers.
You will be guided through a series of small apps and cases studies to a thorough understanding of everything that you need to know to make cutting-edge websites using the three.js WebGL framework.
Stay Up To Date
Enter your email here to stay up to date with news about the book!
What Is three.js?
Three.js is the world's most popular WebGL framework, where WebGL is an API for connecting your browser up the graphics card, providing you with the power to display incredible 3D models, games, music videos, scientific and data visualizations, or pretty much anything else you can imagine, right in your browser and on your smartphone!
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 (11 in total) is divided up into several chapters, each of which is a short, self-contained lesson. Section One introduces all the important basic concepts and once you have completed that you can go through the 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.
100s of carefully crafted live code examples, 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.
See them live here
Clear 2D Diagrams
100s of original 2D diagrams explaining mathematical and 3D concepts.
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!
This includes the entirety of the Introduction and Section One. That's 14 entire chapters 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.
Over the course of Section One, we'll build a simple but complete app, creating a structure that you will be able to extend for apps of any size. While doing so you'll be introduced to 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! 0
- Prerequisites 0.1
- Three.js On Github 0.2
- Getting Help 0.3
- Dealing With Different three.js Versions 0.4
- Live Code Examples And Debugging 0.5
- Getting Started 1
- Hello, Cube! 1.1
- Lights! Color! Action! 1.2
- Improved Animation Loop And Automatic Resizing 1.3
- Introduction To Textures 1.4
- Camera Controls And Global Illumination 1.5
- Shapes And Transformations 1.6
- Loading External Models 1.7
- Components, Helpers And Inheritance 2
- Create A Class 2.1
- A Bullet-Proof Reusable App 2.2
- Inheritance In three.js 2.2
- The Object3D Base Class 2.3
- The Scene Graph And The Scene Object 2.3
- Visualizing The Invisible: Helper Gizmos 2.4
- Cameras 3
- The PerspectiveCamera 3.1
- The OrthographicCamera 3.2
- Creating a 2D GUI over a 3D scene 3.3
- Materials And Textures 4
- Common Material Properties 4.1
- Basic, Lambert And Phong materials 4.2
- Standard And Physical Materials 4.3
- Loading And Working With Textures 4.4
- Environment Maps 4.5
- Canvas And Video Textures 4.6
- Compressed Textures 4.7
- Other Material Types 4.8
- A Brief Intro To Writing Shaders With three.js 4.9
- Lights And Shadows 5
- Working With Lights 5.1
- Basic Light Setups 5.2
- Introducing Shadows 5.3
- Understanding Geometry 6
- Geometry Concepts: Vertices, Normals And UVs 6.1
- Creating Your Own Geometry 6.2
- Creating A Custom BufferGeometry 6.3
- Introducing Morph Targets 6.4
- Skinning And Skeletal Animation 6.5
- Lines And Shapes 6.6
- Text 6.7
- Instanced Geometry 6.8
- Rendering Your Scene With WebGL 7
- The WebGLRenderer In Depth 7.1
- Rendering Offscreen With WebGLRendererTarget 7.2
- Rendering To An Environment Map: WebGLRendererTargetCube 7.3
- WebGLRenderer: Advanced Techniques 7.4
- The Animation System 8
- Working With The Animation System 8.1
- Creating Animations 8.2
- Walk To Run: Blending Animations Clips 8.3
- Post-Processing, Shaders, And Effects 9
- Adding Post-Processing To A Scene 9.1
- Antialiasing A Post-Processed Scene 9.2
- Create A Custom Post Effect 9.3
- Working With Other Applications 10
- Preparing Models For Export 10.1
- Converting To glTF Format 10.2
- The Loading Manager 10.3
- Automatically Focus The Camera On A Loaded Object 10.4
- Sound 11
- The WebAudio API 11.1
- Positional Sound 11.1
- Points, Particles Systems, And Sprites 12
- Sprites 12.1
- Particle Systems 12.2
- Create A Particle System From An Existing Geometry 12.3
- Examples And Plugins 13
- The Live Examples 13.1
- Free Assets: Models, Fonts, Textures, Sounds 13.2
- Camera Controls Part Two 13.3
- Loaders And Exporters 13.4
- References And Resources