book

Learn Three.js - Fourth Edition

Name: Learn Three.js - Fourth Edition
Author: Jos Dirksen
ISBN: 9781803233871

by Jos Dirksen

February 2023

Intermediate to advanced

554 pages

11h 23m

English

Packt Publishing

Read now

Unlock full access

Learn Three.js
Fourth EditionContributorsAbout the authorAbout the reviewers
Preface
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
Part 1: Getting Up and Running
Chapter 1: Creating Your First 3D Scene with Three.js
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
Chapter 2: The Basic Components that Make up a Three.js Application
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
Chapter 3: Working with Light Sources in Three.js
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
Part 2: Working with the Three.js Core Components
Chapter 4: Working with Three.js Materials
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
Chapter 5: Learning to Work with Geometries
2D geometriesTHREE.PlaneGeometryTHREE.CircleGeometryTHREE.RingGeometryTHREE.ShapeGeometry3D geometriesTHREE.BoxGeometryTHREE.SphereGeometryTHREE.CylinderGeometryTHREE.ConeGeometryTHREE.TorusGeometryTHREE.TorusKnotGeometryTHREE.PolyhedronGeometryTHREE.IcosahedronGeometryTHREE.TetrahedronGeometryTHREE.OctahedronGeometryTHREE.DodecahedronGeometrySummary
Chapter 6: Exploring Advanced Geometries
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

Chapter 7: Points and Sprites
Understanding points and spritesStyling particles using texturesDrawing an image on the canvasUsing textures to style particlesWorking with sprite mapsCreating THREE.Points from existing geometrySummary
Part 3: Particle Clouds, Loading and Animating Models
Chapter 8: Creating and Loading Advanced Meshes and Geometries
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
Chapter 9: Animation and Moving the Camera
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
Chapter 10: Loading and Working with Textures
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
Part 4: Post-Processing, Physics, and Sounds
Chapter 11: Render Postprocessing
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
Chapter 12: Adding Physics and Sounds to Your Scene
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
Chapter 13: Working with Blender and Three.js
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
Chapter 14: Three.js Together with React, TypeScript, and Web-XR
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
Index
Why subscribe?
Other Books You May EnjoyPackt is searching for authors like youDownload a free PDF copy of this book

Content preview from Learn Three.js - Fourth Edition

14 Three.js Together with React, TypeScript, and Web-XR

In this final chapter, we’ll dive into two additional topics. First, we’ll look at how you can combine Three.js with TypeScript and React. The second part of this chapter will show some examples of how you can integrate your 3D scenes with Web-XR. With Web-XR, you can enhance your scenes to work with VR and AR technologies.

More specifically, we’ll show you the following examples:

Using Three.js with TypeScript: For the first example, we’ll show you how you can create a simple project that combines Three.js and TypeScript. We’ll create a very simple application, much like the samples we’ve already seen in the previous chapters, and show you how you can use TypeScript with Three.js to create ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Publisher Resources

ISBN: 9781803233871

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

Learn Three.js - Fourth Edition

by Jos Dirksen

14

Three.js Together with React, TypeScript, and Web-XR

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.