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

Format:

Book

Author/Creator:

Dirksen, Jos.

Language:

English

Subjects (All):

Application software--Development--Computer programs.

Application software.

Computer graphics--Computer programs.

Computer graphics.

Web sites--Design.

Web sites.

WebGL (Computer program language).

HTML (Document markup language).

Physical Description:

1 online resource (554 pages)

Edition:

4th ed.

Place of Publication:

Birmingham : Packt Publishing, Limited, 2023.

System Details:

Mode of access: World Wide Web.

Biography/History:

Dirksen Jos: Jos Dirksen has worked as a software developer and architect for almost two decades. He has a lot of experience in many technologies, ranging from backend technologies, such as Java and Scala, to frontend development using HTML5, CSS, JavaScript, and Typescript. Besides working with these technologies, Jos regularly speaks at conferences and likes to write about new and interesting technologies on his blog. He also likes to experiment with new technologies and see how they can best be used to create beautiful data visualizations. Previously, Jos has worked in many different roles in the private and public sectors, ranging from private companies such as ING, ASML, Malmberg, and Philips to organizations in the public sector, such as the Department of Defense and the Port of Rotterdam.

Summary:

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.

Contents:

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

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

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

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

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

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

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

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

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

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

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

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

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

Index

Other Books You May Enjoy.

Notes:

Includes index.

Includes bibliographical references and index.

Description based on publisher supplied metadata and other sources.

ISBN:

9781803235868

1803235861

OCLC:

1370903011