Learning Three.js – the JavaScript 3D Library for WebGL - Second Edition

Create stunning 3D graphics in your browser using the Three.js JavaScript library

Learning Three.js – the JavaScript 3D Library for WebGL - Second Edition

This ebook is included in a Mapt subscription
Jos Dirksen

4 customer reviews
Create stunning 3D graphics in your browser using the Three.js JavaScript library
$0.00
$20.00
$49.99
$29.99p/m after trial
RRP $39.99
RRP $49.99
Subscription
eBook
Print + eBook
Start 30 Day Trial
Subscribe and access every Packt eBook & Video.
 
  • 4,000+ eBooks & Videos
  • 40+ New titles a month
  • 1 Free eBook/Video to keep every month
Start Free Trial
 
Preview in Mapt

Book Details

ISBN 139781784392215
Paperback422 pages

Book Description

Modern browsers support WebGL, which makes it possible to create 3D graphics in a browser without having to use plugins such as Flash and Java. Programming WebGL, however, is difficult, complex, and very difficult to debug. With Three.js, it is possible to create stunning 3D graphics in an intuitive manner using JavaScript, without the need to know the details of WebGL.

Learning Three.js – the JavaScript 3D Library for WebGL, Second Edition, is a practical, example-rich book that will help you learn about all the features of Three.js. This book will show you how to create or load models from externally created models and realistic-looking 3D objects using materials and textures. You'll also learn how to use the HTML5 video and canvas elements as a material for your 3D objects, different ways of animating your models, skeleton-based animation, and how to add physics such as gravity and collision detection to your scene. By the end of the book, you'll know everything that is required to create 3D animated graphics that run in any browser using Three.js.

Table of Contents

Chapter 1: Creating Your First 3D Scene with Three.js
Requirements to use Three.js
Getting the source code
Creating the HTML skeleton
Rendering and viewing a 3D object
Adding materials, lights, and shadows
Expanding your first scene with animations
Using dat.GUI to make experimenting easier
Automatically resize the output when browser size changes
Summary
Chapter 2: Basic Components That Make Up a Three.js Scene
Creating a scene
Geometries and meshes
Different cameras for different uses
Summary
Chapter 3: Working with the Different Light Sources Available in Three.js
Different kinds of lighting provided by Three.js
Basic lights
Special lights
Summary
Chapter 4: Working with Three.js Materials
Understanding common material properties
Starting with a simple mesh
Advanced materials
Materials you can use for a line geometry
Summary
Chapter 5: Learning to Work with Geometries
The basic geometries provided by Three.js
Summary
Chapter 6: Advanced Geometries and Binary Operations
THREE.ConvexGeometry
THREE.LatheGeometry
Creating 3D text
Using binary operations to combine meshes
Summary
Chapter 7: Particles, Sprites, and the Point Cloud
Understanding particles
Particles, THREE.PointCloud, and THREE.PointCloudMaterial
Styling particles with the HTML5 canvas
Using textures to style particles
Working with sprite maps
Creating THREE.PointCloud from an advanced geometry
Summary
Chapter 8: Creating and Loading Advanced Meshes and Geometries
Geometry grouping and merging
Summary
Chapter 9: Animations and Moving the Camera
Basic animations
Working with the camera
Morphing and skeletal animation
Creating animations using external models
Summary
Chapter 10: Loading and Working with Textures
Using textures in materials
Advanced usage of textures
Summary
Chapter 11: Custom Shaders and Render Postprocessing
Setting up Three.js for postprocessing
Postprocessing passes
Creating custom postprocessing shaders
Summary
Chapter 12: Adding Physics and Sounds to Your Scene
Creating a basic Three.js scene
Material properties
Basic supported shapes
Using constraints to limit movement of objects
Summary

What You Will Learn

  • Use the different geometries that are provided by Three.js
  • Apply realistic lighting and shadows to the 3D objects you have created
  • Use the different camera controls provided by Three.js to effortlessly navigate around your 3D scene
  • Make use of advanced textures on materials to create realistic-looking 3D objects by using bump maps, normal maps, specular maps, and light maps
  • Import and animate models from external formats, such as OBJ, STL, Collada, and many more
  • Create and run animations using morph targets and bone animations
  • Explore the Physijs JavaScript library to apply physics to your 3D objects
  • Interact directly with WebGL by creating custom vertex and fragment shaders

Authors

Table of Contents

Chapter 1: Creating Your First 3D Scene with Three.js
Requirements to use Three.js
Getting the source code
Creating the HTML skeleton
Rendering and viewing a 3D object
Adding materials, lights, and shadows
Expanding your first scene with animations
Using dat.GUI to make experimenting easier
Automatically resize the output when browser size changes
Summary
Chapter 2: Basic Components That Make Up a Three.js Scene
Creating a scene
Geometries and meshes
Different cameras for different uses
Summary
Chapter 3: Working with the Different Light Sources Available in Three.js
Different kinds of lighting provided by Three.js
Basic lights
Special lights
Summary
Chapter 4: Working with Three.js Materials
Understanding common material properties
Starting with a simple mesh
Advanced materials
Materials you can use for a line geometry
Summary
Chapter 5: Learning to Work with Geometries
The basic geometries provided by Three.js
Summary
Chapter 6: Advanced Geometries and Binary Operations
THREE.ConvexGeometry
THREE.LatheGeometry
Creating 3D text
Using binary operations to combine meshes
Summary
Chapter 7: Particles, Sprites, and the Point Cloud
Understanding particles
Particles, THREE.PointCloud, and THREE.PointCloudMaterial
Styling particles with the HTML5 canvas
Using textures to style particles
Working with sprite maps
Creating THREE.PointCloud from an advanced geometry
Summary
Chapter 8: Creating and Loading Advanced Meshes and Geometries
Geometry grouping and merging
Summary
Chapter 9: Animations and Moving the Camera
Basic animations
Working with the camera
Morphing and skeletal animation
Creating animations using external models
Summary
Chapter 10: Loading and Working with Textures
Using textures in materials
Advanced usage of textures
Summary
Chapter 11: Custom Shaders and Render Postprocessing
Setting up Three.js for postprocessing
Postprocessing passes
Creating custom postprocessing shaders
Summary
Chapter 12: Adding Physics and Sounds to Your Scene
Creating a basic Three.js scene
Material properties
Basic supported shapes
Using constraints to limit movement of objects
Summary

Book Details

ISBN 139781784392215
Paperback422 pages
Read More
From 4 reviews

Read More Reviews