Learn Three. js : Program 3D Animations and Visualizations for the Web with JavaScript and WebGL

Cover -- Title Page -- Copyright and Credits -- Contributors -- Table of Contents -- Preface -- Part 1: Getting Up and Running -- Chapter 1: Creating Your First 3D Scene with Three.js -- Technical requirements -- Getting the source code -- Testing and experimenting with the examples -- Exploring the HTML structure for Three.js applications -- Rendering and viewing a 3D object -- Setting up the scene -- Adding lights -- Adding the meshes -- Adding an animation loop -- Using lil-gui to control properties and make experimenting easier -- Helper objects and util functions -- Summary -- Chapter 2: The Basic Components that Make up a Three.js Application -- Creating a scene -- The basic functionality of a scene -- How geometries and meshes are related -- The properties and functions of a geometry -- Functions and attributes for meshes -- Using different cameras for different scenes -- An orthographic camera versus a perspective camera -- Looking at specific points -- Debugging what a camera looks at -- Summary -- Chapter 3: Working with Light Sources in Three.js -- What lighting types are provided in Three.js? -- Working with basic lights -- THREE.AmbientLight -- THREE.SpotLight -- THREE.PointLight -- THREE.DirectionalLight -- Using the THREE.Color object -- Working with special lights -- THREE.HemisphereLight -- THREE.RectAreaLight -- THREE.LightProbe -- THREE.LensFlare -- Summary -- Part 2: Working with the Three.js Core Components -- Chapter 4: Working with Three.js Materials -- Understanding common material properties -- Basic properties -- Blending properties -- Advanced properties -- Starting with simple materials -- THREE.MeshBasicMaterial -- THREE.MeshDepthMaterial -- Combining materials -- THREE.MeshNormalMaterial -- Multiple materials for a single mesh -- Advanced materials -- THREE.MeshLambertMaterial -- THREE.MeshPhongMaterial ; THREE.MeshToonMaterial -- THREE.MeshStandardMaterial -- THREE.MeshPhysicalMaterial -- THREE.ShadowMaterial -- Using your own shaders with THREE.ShaderMaterial -- Customizing existing shaders with CustomShaderMaterial -- Materials you can use for a line geometry -- THREE.LineBasicMaterial -- THREE.LineDashedMaterial -- Summary -- Chapter 5: Learning to Work with Geometries -- 2D geometries -- THREE.PlaneGeometry -- THREE.CircleGeometry -- THREE.RingGeometry -- THREE.ShapeGeometry -- 3D geometries -- THREE.BoxGeometry -- THREE.SphereGeometry -- THREE.CylinderGeometry -- THREE.ConeGeometry -- THREE.TorusGeometry -- THREE.TorusKnotGeometry -- THREE.PolyhedronGeometry -- THREE.IcosahedronGeometry -- THREE.TetrahedronGeometry -- THREE.OctahedronGeometry -- THREE.DodecahedronGeometry -- Summary -- Chapter 6: Exploring Advanced Geometries -- Learning advanced geometries -- THREE.ConvexGeometry -- THREE.LatheGeometry -- BoxLineGeometry -- THREE.RoundedBoxGeometry -- TeapotGeometry -- Creating a geometry by extruding a 2D shape -- THREE.ExtrudeGeometry -- THREE.TubeGeometry -- Extruding 3D shapes from an SVG element -- THREE.ParametricGeometry -- Geometries you can use for debugging -- THREE.EdgesGeometry -- THREE.WireFrameGeometry -- Creating a 3D text mesh -- Rendering text -- Adding custom fonts -- Creating text using the Troika library -- Summary -- Chapter 7: Points and Sprites -- Understanding points and sprites -- Styling particles using textures -- Drawing an image on the canvas -- Using textures to style particles -- Working with sprite maps -- Creating THREE.Points from existing geometry -- Summary -- Part 3: Particle Clouds, Loading and Animating Models -- Chapter 8: Creating and Loading Advanced Meshes and Geometries -- Geometry grouping and merging -- Grouping objects together -- Merging geometries -- Loading geometries from external resources ; Saving and loading in Three.js JSON format -- Importing from 3D file formats -- The OBJ and MTL formats -- Loading a gLTF model -- Showing complete LEGO models -- Loading voxel-based models -- Showing proteins from PDB -- Loading a point cloud from a PLY model -- Other loaders -- Summary -- Chapter 9: Animation and Moving the Camera -- Basic animations -- Simple animations -- Selecting and moving objects -- Animating with Tween.js -- Working with the camera -- ArcballControls -- TrackBallControls -- FlyControls -- FirstPersonControls -- OrbitControls -- Morphing and skeleton animation -- Animation with morph targets -- Animation with a mixer and morph targets -- Animation using bones and skinning -- Creating animations using external models -- Using gltfLoader -- Visualizing motions captured models using fbxLoader -- Loading an animation from a Quake model -- Loading an animation from a COLLADA model -- Visualizing a skeleton with BVHLoader -- Summary -- Chapter 10: Loading and Working with Textures -- Using textures in materials -- Loading a texture and applying it to a mesh -- Using a bump map to provide extra details to a mesh -- Achieving more detailed bumps and wrinkles with a normal map -- Using a displacement map to alter the position of vertices -- Adding subtle shadows with an ambient occlusion map -- Creating fake lighting using a lightmap -- Metalness and roughness maps -- Using an alpha map to create transparent models -- Using an emissive map for models that glow -- Using a specular map to determine shininess -- Creating fake reflections using an environment map -- Repeat wrapping -- Rendering to a canvas and using it as a texture -- Using the canvas as a color map -- Using the canvas as a bump map -- Using the output from a video as a texture -- Summary -- Part 4: Post-Processing, Physics, and Sounds ; Chapter 11: Render Postprocessing -- Setting up Three.js for postprocessing -- Creating THREE.EffectComposer -- Configuring THREE.EffectComposer for postprocessing -- Updating the render loop -- Postprocessing passes -- Simple postprocessing passes -- Showing the output of multiple renderers on the same screen -- Additional simple passes -- Advanced EffectComposer flows using masks -- Advanced pass - bokeh -- Advance pass - ambient occlusion -- Using THREE.ShaderPass for custom effects -- Simple shaders -- Blurring shaders -- Creating custom postprocessing shaders -- Custom grayscale shader -- Creating a custom bit shader -- Summary -- Chapter 12: Adding Physics and Sounds to Your Scene -- Creating a basic Three.js scene with Rapier -- Setting up the world and creating the descriptions -- Rendering the scene and simulating the world -- Simulating dominos in Rapier -- Working with restitution and friction -- Rapier-supported shapes -- Using joints to limit the movement of objects -- Connecting two objects with a fixed joint -- Connecting objects with a spherical joint -- Limiting rotation with a revolute joint -- Limiting movement to a single axis with a prismatic joint -- Adding sound sources to your scene -- Summary -- Chapter 13: Working with Blender and Three.js -- Exporting from Three.js and importing into Blender -- Exporting a static scene from Blender and importing it into Three.js -- Exporting an animation from Blender and importing it into Three.js -- Baking lightmaps and ambient occlusion maps in Blender -- Setting up a scene in Blender -- Adding lighting to the scene -- Baking the light textures -- Exporting the scene and importing it into Blender -- Baking an ambient occlusion map in Blender -- Custom UV modeling in Blender -- Summary -- Chapter 14: Three.js Together with React, TypeScript, and Web-XR -- Using Three.js with TypeScript ; Using Three.js and React with TypeScript -- Using Three.js and React with React Three Fiber -- Three.js and VR -- Three.js and AR -- Summary -- Index -- Other Books You May Enjoy