Welcome to the Missing Manual for three.js!
Discover three.js is a complete introduction to the web as a platform for 3D graphics using the three.js WebGL library, from one of the core three.js developers.
This book is a complete tutorial series designed to get you started on your journey of creating modern, professional-quality 3D web applications in the shortest time possible.
What is three.js?
three.js is the world's most popular JavaScript framework for displaying 3D content on the web.
With three.js, you no longer need a fancy gaming PC or console to display photorealistic 3D graphics. You don't even need to download a special application. Now everyone can experience stunning 3D applications in the palm of their hand using nothing more than a smartphone and a web browser.
This amazing library and the vibrant community that surrounds are all you need to create games, music videos, scientific and data visualizations, or pretty much anything else you can imagine, right in your browser, on your laptop, tablet, or smartphone!
What's in the Book
This book covers everything you need to start creating amazing, professional-quality, high-performance 3D web applications that run on any operating system and device, from smartphones to laptops to smart-watches, even if you are completely new to web development and computer graphics. three.js is the most accessible computer graphics framework that has ever existed, and we will take full advantage of that to guide you to a high level of expertise, in no time at all.
Here, we introduce all the foundational concepts you need to create a basic three.js application, and with this knowledge you'll be creating amazing projects of your own in no time. With the power of the third dimension, the only limit is your imagination!
If you've never created a JavaScript application before, head over to the appendices. We've got you covered with everything from HTML, CSS, and JavaScript reference chapters to more advanced chapters on modules and asynchronous coding patterns, and more, all completely free.
Live Code Examples
Every chapter comes with a live code editor that automatically updates as you type, featuring before and after views so you can work along with the text or skip ahead to see the completed code in action. You can also download the code as a zip file, ready for use on your own computer.
Clear 2D Diagrams
Concepts are demonstrated throughout the book using hundreds of original diagrams that clearly illustrate the ideas being introduced.
Table of Contents
The main chapters in this book take the form of a free tutorial series, which, along with the Introduction and Appendices, introduces all the important concepts and terminology that you need to get started in your exploration of 3D web graphics. Everything you need to know is covered here, 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, completely free!
- 0:Welcome to Discover three.js!
- 0.1:How to Use This Book
- 0.2:What Do You Need to Run a three.js App?
- 0.3:Welcome to the Community: three.js Around the Web
- 0.4:three.js on GitHub - Where the Magic Happens
- 0.5:How to Include three.js in Your Projects
- 0.7:Using three.js with React, Vue.js, Angular, Svelte, TypeScript...
- 1:Getting Started: Here's Where the Real Fun Begins!
- 1.1:The Structure of a three.js App
- 1.2:Your First three.js Scene: Hello, Cube!
- 1.3:Introducing the World App
- 1.4:Physically Based Rendering and Lighting
- 1.5:Transformations and Coordinate Systems
- 1.6:Making Our Scenes Responsive (and also Dealing with Jaggies)
- 1.7:The Animation Loop
- 1.8:A Brief Introduction to Texture Mapping
- 1.9:Extend three.js With a Camera Controls Plugin
- 1.10:Ambient Lighting: Illumination from Every Direction
- 1.11:Organizing Your Scenes
- 1.12:The Built-In Geometries
- 1.13:Load 3D Models in glTF Format
- 1.14:The three.js Animation System
- A:Appendices
- A.1:HTML and CSS Used in This Book
- A.2:JavaScript Reference
- A.3:The Document Object Model and DOM API
- A.4:JavaScript Modules
- A.5:Asynchronous JavaScript
- B.1:Dealing with Different three.js Versions
- B.2:The Big List of three.js Tips and Tricks!
- :
The Big List of three.js Tips and Tricks
Click here for a big list of tips, tricks, caveats, gotchas and performance suggestions for using three.js, for beginners and experts alike. Keep this page open while working on three.js applications of any size.
About the Author
Lewy Blue is a one time stilt-walker and fire-dancer who decided there was an even brighter future in mathematics.
His idea of a perfect life is to travel the world with a backpack and laptop. Currently, he is living out that dream somewhere in Vietnam.
He is one of the main contributors to the three.js open source project, focusing on documentation writing and interoperability with third-party applications, especially Autodesk, Blender, and Lightwave 3D. He is an admin on the official three.js forum.