Get ready to DISCOVER three.js!

Discover three.js logo

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.

threejs.org - the homepage of three.js

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.


Live Code Examples

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.

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!

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!


Table Of Contents

  • 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
  • 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
  • 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
  • The PerspectiveCamera 3.1
  • The OrthographicCamera 3.2
  • Creating a 2D GUI over a 3D scene 3.3
  • 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
  • Working With Lights 5.1
  • Basic Light Setups 5.2
  • Introducing Shadows 5.3
  • 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
  • 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
  • Working With The Animation System 8.1
  • Creating Animations 8.2
  • Walk To Run: Blending Animations Clips 8.3
  • Adding Post-Processing To A Scene 9.1
  • Antialiasing A Post-Processed Scene 9.2
  • Create A Custom Post Effect 9.3
  • 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
  • The WebAudio API 11.1
  • Positional Sound 11.1
  • Sprites 12.1
  • Particle Systems 12.2
  • Create A Particle System From An Existing Geometry 12.3
  • The Live Examples 13.1
  • Free Assets: Models, Fonts, Textures, Sounds 13.2
  • Camera Controls Part Two 13.3
  • Loaders And Exporters 13.4

Blog Posts

Coming Soon!


Math Posts

Coming Soon!


Apps

Coming Soon!


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.