Learn Three.js - Fourth Edition

Jos Dirksen

Language: English

Published: Jul 1, 2014

Description:

Create and animate stunning 3D browser-based graphics with the Three.js JavaScript library without needing to understand the complexity of WebGL

Key Features

  • Construct 3D graphics and animations for the web without needing to understand WebGL
  • Enhance your 3D graphics with light sources, shadows, advanced materials, and textures
  • Load models from external sources, and visualize and animate them directly from JavaScript

Book Description

WebGL allows us to create 3D graphics in the browser without having to use plugins such as Flash and Java. However, programming in WebGL can be complex and challenging. With Three.js, you can create stunning 3D graphics intuitively using JavaScript without having to learn WebGL. In this book, you'll learn how to create and animate immersive 3D scenes directly in your browser using the full potential of WebGL and modern browsers.

This latest edition of Learn Three.js starts with extensive examples and code samples of the basic concepts and building blocks of Three.js, before diving headlong into more advanced concepts, such as DecalGeometry. You'll also learn how to create, or load from externally created models, realistic 3D objects using materials and textures. You'll learn how to use morph target and skeleton-based animation, before adding physics, such as gravity and collision detection, to your scene. In this new edition, we'll show you how to use Cannon.js to add realistic physics to your scenes, and you'll see how easy it is to integrate Blender, React, and TypeScript with Three.js, as well as WebXR, which we'll use to create virtual reality and augmented reality scenes.

By the end of this book, you'll have gained the skills you need to create impressive 3D animated graphics using Three.js.

What you will learn

  • Understand how materials interact with your 3D objects
  • Implement the different camera controls provided by Three.js
  • Work with vertices to create snow, rain, and galaxy-like effects
  • Import models from external formats such as OBJ, STL, and COLLADA
  • Create and run animations using morph target and skeletal animation
  • Use bump maps, normal maps, specular maps, and light maps
  • Interact with WebGL by creating custom vertex and fragment shaders
  • Integrate Blender, WebXR, React, and Typescript with Three.js

Who This Book Is For

This book is for JavaScript developers who are looking to learn how to use the Three.js library confidently.

Table of Contents

  1. Creating Your First 3D Scene withThree.js
  2. The Basic Components that Make Up a Three.js Application
  3. Working with Light Sources in Three.js
  4. Working with Three.js Materials
  5. Learning to Work with Geometries
  6. Advanced Geometries and Binary Operations
  7. Points and Sprites
  8. Creating and Loading Advanced Meshes and Geometries
  9. Animations and moving the camera
  10. Loading and Working with Textures
  11. Render Postprocessing
  12. Adding Physics and Sounds to Your Scene
  13. Working together with Blender and Three.js
  14. Web-XR, Typescript and React integration