Learn Three.js E-Book

Jos Dirksen

• Herausgeber: Packt Publishing
• Kategorie: Fachliteratur
• Sprache: Englisch

Seitenzahl: 485

Veröffentlichungsjahr: 2023

Beschreibung

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.

Leseprobe

Learn Three.js Fourth Edition

Program 3D animations and visualizations for the web with JavaScript and WebGL

Jos Dirksen

BIRMINGHAM—MUMBAI

Learn Three.js

Fourth Edition

Copyright © 2023 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Group Product Manager: Pavan Ramchandani

Publishing Product Manager: Bhavya Rao

Senior Editor: Mark Dsouza

Senior Content Development Editor: Rashi Dubey

Technical Editor: Simran Udasi

Copy Editor: Safis Editing

Project Coordinator: Sonam Pandey

Proofreader: Safis Editing

Indexer: Tejal Daruwale Soni

Production Designer: Vijay Kamble

Marketing Coordinator: Anamika Singh

First published: October 2013

Second edition: March 2015

Third edition: August 2018

Fourth edition: February 2023

Production reference: 1170123

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham

B3 2PB, UK.

ISBN 978-1-80323-387-1

www.packt.com

To the memory of my father, who has been the best dad to me, an awesome grandfather to Sophie and Amber, and the kindest person I’ve ever known.

– Jos Dirksen

Contributors

About the author

Jos Dirksen has worked as a software developer and architect for almost two decades. He has a lot of experience with a large range of technologies, ranging from backend technologies, such as Java, Kotlin, and Scala, to frontend development using HTML5, CSS, JavaScript, and TypeScript. Besides working with these technologies, Jos also 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.

He is currently working as a freelance full-stack engineer on various Scala and TypeScript projects.

Previously, Jos 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.

I want to thank the people who have supported me during writing this book. Especially my wife Brigitte, for always being there for me, and my mother Gerdie, who is always there to help us out!

About the reviewers

George Oscar Eugene Campbell has been in the industry since 2017 as a JavaScript developer. He’s experienced in Three.js, Next.js, and TypeScript. He loves the natural creativity that programming offers and exploring the artistic side of things.

John Cotterell has been working as a frontend creative developer for 20 years now. He specializes in Three.js development, as well as AR, VR, and accompanying web technologies. More recently, he has spent time finding his way around the web audio API, GLSL, and the newer WebGPU standard, and is currently working on his first commercial game.

He lives in Bedford, UK, and when he’s not playing or developing games, he likes to spend his free time visiting art galleries with his daughter, Shannon.

Mrunal Sawant is a highly proficient individual who has worked extensively with Three.js to develop different visualization projects.

He completed his master’s in industrial mathematics with computer applications.

He is a skilled professional in the area of 3D visualization, CAD/BIM, and data interoperability (CAD data exchange).

Mrunal highly values his career and lives up to his motto “Work hard and play hard” by staying active doing sports and traveling around the country.

Table of Contents

Preface

Part 1: Getting Up and Running

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Part 1: Getting Up and Running

In the first part, we’ll introduce the basic concepts of Three.js and make sure you’ve got all the information to get up and running. We’ll start by setting up your development environment, and in the following chapters, explore some of the core concepts that make up Three.js.

In this part, there are the following chapters:

Chapter 1, Creating Your First 3D Scene with Three.jsChapter 2, The Basic Components that Make up a Three.js ApplicationChapter 3, Working with Light Sources in Three.js

2

The Basic Components that Make up a Three.js Application

In the previous chapter, you learned about the basics of Three.js. We looked at a couple of examples, and you created your first complete Three.js application. In this chapter, we’ll dive a bit deeper into Three.js and explain the basic components that make up a Three.js application.

By the end of this chapter, you’ll have learned how to use the basic components that are used in every Three.js application and should be able to create simple scenes using these standard components. You should also feel comfortable working with Three.js applications that use the more advanced objects, since the approach used by Three.js for simple and advanced components is the same.

In this chapter, we will cover the following topics:

Creating a sceneHow geometries and meshes are relatedUsing different cameras for different scenes

We’ll start by looking at how you can create a scene and add objects.

Creating a scene

In Chapter 1, Creating Your First 3D Scene with Three.js, you created a THREE.Scene, so you already know some of the basics of Three.js. We saw that for a scene to show anything, we need four different types of objects:

Camera: This determines which part of THREE.Scene is rendered onscreen.Lights: These have an effect on how materials are shown and are used when creating shadow effects (discussed in detail in Chapter 3, Working with Light Sources in Three.js).Meshes: These are the main objects that are rendered from the perspective of the camera. These objects contain the vertices and faces that make up the geometry (for example, a sphere or a cube) and contain a material, which defines what the geometry looks like.Renderer: This uses the camera and the information in the scene to draw (render) the output on the screen.

THREE.Scene