All 80+ recipes from Three.js Cookbook online
About a month ago my third book on Three.js got released: Three.js Cookbook. This book has 80+ recipes on how to accomplish common tasks in Three.js. On this page you can find all the code examples from that book. If you like to know more about these recipes, click the link on the right side of this page:
Note that some of the examples might take some time to load. A number of examples use large textures, large models or other big files that need to be downloaded.
Chapter 1: Getting started
- 01.01 - WebGLRenderer - Skeleton
- 01.02 - Canvasrenderer - Skeleton
- 01.03 - CSS3DRenderer - Skeleton
- 01.04 - Detect WebGL Support
- 01.05 - Setup animation loop
- 01.06 - Determine framerate
- 01.07 - Control variables
- 01.08 - local webserver
- 01.09 - cross-origin
- 01.10 - Keyboard controls
- 01.11 - load resources asynchronously
- 01.12 - wait for resources to load
- 01.13 - Debug Three.js
- 01.14 - Drop file
Chapter 2: Geometries and Meshes
- 02.01 - Rotate around axis
- 02.02 - Rotate around point in space
- 02.04 - Update stuff
- 02.05 - Handle large number of objects
- 02.06 - Create terrain from heightmap
- 02.07 - Point object to another object
- 02.09 - Write text in 3D
- 02.10 - Parametric geometries
- 02.11 - Extend Three.js with a custom geometry object
- 02.12 - Spline Curve
- 02.13 - Load JSON Models with textures
- 02.14 - Use OBJMTL loader with multiple materials
- 02.15 - Apply Matrix Transformations
Chapter 3: Working with camera
- 03.01 - Make the camera follow an object
- 03.02 - Camera zoom in on object
- 03.03 - Use a perspective camera
- 03.04 - Use a orthographic camera
- 03.05 - Create a 2D overlay
- 03.06 - Change camera when screen resizes
- 03.07 - Convert world coordinates to screen coordinates
- 03.08 - Rotate the camera around the scene - y-axis
- 03.09 - Rotate the camera around the scene - x-axis
- 03.10 - Selecting objects
Chapter 4: Materials and textures
- 04.01 - add depth to mesh with bump maps
- 04.02 - add depth to mesh with normal maps
- 04.03 - HTML canvas as textures
- 04.04 - HTML video as texture
- 04.05 - Create a mesh with multiple materials
- 04.06 - Use separate materials for faces
- 04.07 - add transparency to a mesh
- 04.08 - Making part of an object transparent
- 04.10 - Reflections with cubemap
- 04.11 - Reflections with dynamic cubemap
- 04.12 - Setup repeating textures
- 04.13 - Configuring blend modes
- 04.14 - Create custom UV mappings
- 04.16 - Use a shadow map for fixed shadows
Chapter 5: Lights and shaders
- 05.01 - Using shadows with a spot light
- 05.02 - Using shadows with a directional light
- 05.03 - Soften lights
- 05.04 - Create natural lightin with a Hemisphere light
- 05.05 - Use a point light
- 05.06 - Move a light following a path
- 05.09 - Custom Vertex Shader - 1
- 05.10 - Custom vertex shader - 2
- 05.06 - Custom vertex shader
- 05.10 - Custom fragment shader
Chapter 6: particles and postprocessing
- 06.01 - Create a point cloud from an existing geometry
- 06.02 - Create a point cloud from scratch - 2
- 06.02 - Create a point cloud from scratch - 1
- 06.03 - Color individual particles
- 06.04 - Style the particles in a particle system
- 06.05 - Move individual particles - 2
- 06.05 - Move individual particles
- 06.06 - Explode geometry - 2
- 06.06 - Explode geometry - 1
- 06.07 - Setup basic post processing
- 06.08 - Create custom post-processing step
- 06.09 - Save WebGL output
Chapter 7: Animation and physics
- 07.01 - Animation with Tween.js
- 07.02 - Animation with morphing (manually)
- 07.03 - Animation with skeleton
- 07.04 - Morph animation from Blender
- 07.05 - Skeleton animation from Blender
- 07.06 - Add collision detection
- 07.07 - Save animation as movie
- 07.08 - Drag and drop object around scene
- 07.09 - Add a physics engine