book

Learn Three.js - Fourth Edition

by Jos Dirksen

February 2023

Intermediate to advanced

554 pages

11h 23m

English

Packt Publishing

Read now

Unlock full access

Fourth EditionContributorsAbout the authorAbout the reviewers
Who this book is forWhat this book coversTo get the most out of this bookDownload the example code filesConventions usedGet in touchDownload a free PDF copy of this book
Technical requirementsGetting the source codeTesting and experimenting with the examplesExploring the HTML structure for Three.js applicationsRendering and viewing a 3D objectSetting up the sceneAdding lightsAdding the meshesAdding an animation loopUsing lil-gui to control properties and make experimenting easierHelper objects and util functionsSummary
Creating a sceneThe basic functionality of a sceneHow geometries and meshes are relatedThe properties and functions of a geometryFunctions and attributes for meshesUsing different cameras for different scenesAn orthographic camera versus a perspective cameraLooking at specific pointsDebugging what a camera looks atSummary
What lighting types are provided in Three.js?Working with basic lightsTHREE.AmbientLightTHREE.SpotLightTHREE.PointLightTHREE.DirectionalLightUsing the THREE.Color objectWorking with special lightsTHREE.HemisphereLightTHREE.RectAreaLightTHREE.LightProbeTHREE.LensFlareSummary
Understanding common material propertiesBasic propertiesBlending propertiesAdvanced propertiesStarting with simple materialsTHREE.MeshBasicMaterialTHREE.MeshDepthMaterialCombining materialsTHREE.MeshNormalMaterialMultiple materials for a single meshAdvanced materialsTHREE.MeshLambertMaterialTHREE.MeshPhongMaterialTHREE.MeshToonMaterialTHREE.MeshStandardMaterialTHREE.MeshPhysicalMaterialTHREE.ShadowMaterialUsing your own shaders with THREE.ShaderMaterialCustomizing existing shaders with CustomShaderMaterialMaterials you can use for a line geometryTHREE.LineBasicMaterialTHREE.LineDashedMaterialSummary
2D geometriesTHREE.PlaneGeometryTHREE.CircleGeometryTHREE.RingGeometryTHREE.ShapeGeometry3D geometriesTHREE.BoxGeometryTHREE.SphereGeometryTHREE.CylinderGeometryTHREE.ConeGeometryTHREE.TorusGeometryTHREE.TorusKnotGeometryTHREE.PolyhedronGeometryTHREE.IcosahedronGeometryTHREE.TetrahedronGeometryTHREE.OctahedronGeometryTHREE.DodecahedronGeometrySummary
Learning advanced geometriesTHREE.ConvexGeometryTHREE.LatheGeometryBoxLineGeometryTHREE.RoundedBoxGeometryTeapotGeometryCreating a geometry by extruding a 2D shapeTHREE.ExtrudeGeometryTHREE.TubeGeometryExtruding 3D shapes from an SVG elementTHREE.ParametricGeometryGeometries you can use for debuggingTHREE.EdgesGeometryTHREE.WireFrameGeometryCreating a 3D text meshRendering textAdding custom fontsCreating text using the Troika librarySummary

Understanding points and spritesStyling particles using texturesDrawing an image on the canvasUsing textures to style particlesWorking with sprite mapsCreating THREE.Points from existing geometrySummary
Geometry grouping and mergingGrouping objects togetherMerging geometriesLoading geometries from external resourcesSaving and loading in Three.js JSON formatImporting from 3D file formatsThe OBJ and MTL formatsLoading a gLTF modelShowing complete LEGO modelsLoading voxel-based modelsShowing proteins from PDBLoading a point cloud from a PLY modelOther loadersSummary
Basic animationsSimple animationsSelecting and moving objectsAnimating with Tween.jsWorking with the cameraArcballControlsTrackBallControlsFlyControlsFirstPersonControlsOrbitControlsMorphing and skeleton animationAnimation with morph targetsAnimation with a mixer and morph targetsAnimation using bones and skinningCreating animations using external modelsUsing gltfLoaderVisualizing motions captured models using fbxLoaderLoading an animation from a Quake modelLoading an animation from a COLLADA modelVisualizing a skeleton with BVHLoaderSummary
Using textures in materialsLoading a texture and applying it to a meshUsing a bump map to provide extra details to a meshAchieving more detailed bumps and wrinkles with a normal mapUsing a displacement map to alter the position of verticesAdding subtle shadows with an ambient occlusion mapCreating fake lighting using a lightmapMetalness and roughness mapsUsing an alpha map to create transparent modelsUsing an emissive map for models that glowUsing a specular map to determine shininessCreating fake reflections using an environment mapRepeat wrappingRendering to a canvas and using it as a textureUsing the canvas as a color mapUsing the canvas as a bump mapUsing the output from a video as a textureSummary
Setting up Three.js for postprocessingCreating THREE.EffectComposerConfiguring THREE.EffectComposer for postprocessingUpdating the render loopPostprocessing passesSimple postprocessing passesShowing the output of multiple renderers on the same screenAdditional simple passesAdvanced EffectComposer flows using masksAdvanced pass – bokehAdvance pass – ambient occlusionUsing THREE.ShaderPass for custom effectsSimple shadersBlurring shadersCreating custom postprocessing shadersCustom grayscale shaderCreating a custom bit shaderSummary
Creating a basic Three.js scene with RapierSetting up the world and creating the descriptionsRendering the scene and simulating the worldSimulating dominos in RapierWorking with restitution and frictionRapier-supported shapesUsing joints to limit the movement of objectsConnecting two objects with a fixed jointConnecting objects with a spherical jointLimiting rotation with a revolute jointLimiting movement to a single axis with a prismatic jointAdding sound sources to your sceneSummary
Exporting from Three.js and importing into BlenderExporting a static scene from Blender and importing it into Three.jsExporting an animation from Blender and importing it into Three.jsBaking lightmaps and ambient occlusion maps in BlenderSetting up a scene in BlenderAdding lighting to the sceneBaking the light texturesExporting the scene and importing it into BlenderBaking an ambient occlusion map in BlenderCustom UV modeling in BlenderSummary
Using Three.js with TypeScriptUsing Three.js and React with TypeScriptUsing Three.js and React with React Three FiberThree.js and VRThree.js and ARSummary
Other Books You May EnjoyPackt is searching for authors like youDownload a free PDF copy of this book

Overview

Explore the world of 3D animations and visuals tailored for the web through "Learn Three.js". This comprehensive guide walks you through how to build, animate, and enhance 3D scenes directly in your browser using JavaScript and WebGL.

What this Book will help me do

Create a variety of 3D animations and visual effects tailored for modern web browsers.
Enhance visual quality with materials, textures, and lighting to make 3D objects stand out.
Animate imported 3D models with morph targets and skeletal animation techniques.
Integrate physics for realistic movements, collisions, and interactions in your 3D scenes.
Combine Three.js with tools like Blender, React, and TypeScript to optimize your workflow.

Author(s)

Jos Dirksen is a recognized expert in JavaScript and graphics programming with extensive experience in WebGL and 3D visualizations. He brings his expertise into "Learn Three.js" to provide real-world guidance, illuminating practical use cases and workflows. Readers will benefit from Jos's clear explanations and passion for teaching interactive 3D development.

Who is it for?

This book is excellent for web developers and JavaScript enthusiasts who aspire to create immersive 3D experiences on the web. Beginners will appreciate the foundational chapters laid out methodically, while experienced developers can dive into advanced topics like shader programming and physics. If you're looking to expand your toolset or take on the challenge of interactive 3D web graphics, this book is for you.