Learn Three.js: Program 3D animations and visualizations for the web with JavaScript and WebGL, 4th Edition
- Length: 554 pages
- Edition: 4
- Language: English
- Publisher: Packt Publishing
- Publication Date: 2023-02-17
- ISBN-10: 1803233877
- ISBN-13: 9781803233871
- Sales Rank: #588131 (See Top 100 Books)
Become a creative JavaScript professional by creating and animating stunning 3D, browser-based graphics with Three.js from beginning to end
Purchase of the print or Kindle book includes a free eBook in PDF format
Key Features
- Enhance your 3D graphics with light sources, shadows, advanced materials, and textures
- Load models from external sources, visualize and, animate them directly using JavaScript
- Create your own custom WebGL shader, explore Three.js’ postprocessing feature, and learn how to integrate with Blender, React, and Typescript
Book Description
Three.js has become the industry standard for creating stunning 3D WebGL content. In this edition, you’ll learn about all the features of Three.js and understand how to integrate it with the newest physics engines. You’ll also develop a strong grip on creating and animating immersive 3D scenes directly in your browser, reaping the full potential of WebGL and modern browsers.
The book starts with the basic concepts and building blocks used in Three.js and helps you explore these essential topics in detail through extensive examples and code samples. You’ll learn how to create realistic-looking 3D objects using textures and materials and how to load existing models from an external source. Next, you’ll understand how to control the camera using the Three.js built-in camera controls, which will enable you to fly or walk around the 3D scene you’ve created. Later chapters will cover the use of HTML5 video and canvas elements as materials for your 3D objects to animate your models. You’ll learn how to use morph targets and skeleton-based animation, before understanding how to add physics, such as gravity and collision detection, to your scene. Finally, you’ll master combining Blender with Three.js and creating VR and AR scenes.
By the end of this book, you’ll be well-equipped to create 3D-animated graphics using Three.js.
What you will learn
- Implement the different camera controls provided by Three.js to navigate your 3D scene
- Discover working with vertices directly to create snow, rain, and galaxy-like effects
- Import and animate models from external formats, such as glTF, OBJ, STL, and COLLADA
- Design and run animations using morph targets and bone-based animation
- Create realistic-looking 3D objects using advanced textures on materials
- Interact directly with WebGL by creating custom vertex and fragment shaders
- Make scenes using the Rapier physics engine, and integrate Three.js with VR and AR
Who this book is for
This book is for JavaScript developers looking to learn the use of Three.js library.
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
How to download source code?
1. Go to: https://github.com/PacktPublishing
2. In the Find a repository… box, search the book title: Learn Three.js: Program 3D animations and visualizations for the web with JavaScript and WebGL, 4th Edition, sometime you may not get the results, please search the main title.
3. Click the book title in the search results.
3. Click Code to download.
1. Disable the AdBlock plugin. Otherwise, you may not get any links.
2. Solve the CAPTCHA.
3. Click download link.
4. Lead to download server to download.
