Welcome to the Missing Manual for three.js!

Discover three.js logo

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?

Three.js is the world's most popular JavaScript framework for displaying 3D content on the web, providing you with the power to display incredible 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.

threejs.org - the homepage of three.js

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.

See All the Examples Live Here



Clear 2D Diagrams

Mathematical and 3D concepts are clearly explained throughout the book using hundreds of original 2D diagrams.

Perspective camera frustum
Dancing animation, selected frames
Directional Lighting
Cylinder rotation around Z-axis

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!


Free Sample

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!


Table of Contents

  • 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
  • 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: 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
  • Working with the PerspectiveCamera 3.1
  • Creating 2D Scenes and Overlays: The OrthographicCamera 3.2
  • Camera Controls Part Two: MapControls, FirstPersonControls, PointerLockControls 3.3
  • 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
  • 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
  • Basic Geometry Concepts: Vertices, Normals and UVs 7.1
  • Creating A Custom Geometry 7.2
  • Throwing Shapes: Recreating the 2D Canvas API in 3D 8.1
  • The WebGLRenderer in Depth 9.1
  • Rendering Offscreen to a WebGLRendererTarget 9.2
  • Working with the Animation System 10.1
  • Introducing Morph Targets 10.2
  • Bones, Skinning, and Skeletal Animation 10.3
  • 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
  • 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
  • The WebAudio API 13.1
  • Positional Sound 13.1
  • Sprites 14.1
  • Particle Systems 14.2
  • Text in 3D: The FontLoader and TextBufferGeometry 8.2

Blog Posts

Coming Soon!


Math Posts

Coming Soon!


Apps

three.js Loader

Loader

Viewer for glTF, FBX and Collada (DAE) files using loaders from the latest version of three.js.


NPM Modules

Coming Soon!


About the Author

Portrait of the author

Lewy Blue is a mathematician and JavaScript specialist. He is one of the main collaborators on the three.js open source project on Github, focussing on documentation writing and interoperability with third-party applications, especially the Autodesk FBX format. He is also an admin on the official three.js forum.