Book Image

Learn Three.js - Third Edition

By : Jos Dirksen
1 (1)
Book Image

Learn Three.js - Third Edition

1 (1)
By: Jos Dirksen

Overview of this book

WebGL makes it possible to create 3D graphics in the browser without having to use plugins such as Flash and Java. Programming WebGL, however, is difficult and complex. With Three.js, it is possible to create stunning 3D graphics in an intuitive manner using JavaScript, without having to learn WebGL. With this book, you’ll learn how to create and animate beautiful looking 3D scenes directly in your browser-utilizing the full potential of WebGL and modern browsers. It starts with the basic concepts and building blocks used in Three.js. From there on, it will expand on these subjects using extensive examples and code samples. You will learn to create, or load, from externally created models, realistic looking 3D objects using materials and textures. You’ll find out how to easily control the camera using the Three.js built-in in camera controls, which will enable you to fly or walk around the 3D scene you created. You will then use the HTML5 video and canvas elements as a material for your 3D objects and to animate your models. Finally, you will learn to use morph and skeleton-based animation, and even how to add physics, such as gravity and collision detection, to your scene. After reading this book, you’ll know everything that is required to create 3D animated graphics using Three.js.
Table of Contents (14 chapters)

What this book covers

Chapter 1, Creating Your First 3D Scene with Three.js, covers the basic steps you need to take to get started with Three.js. You'll immediately create your first Three.js scene, and at the end of this chapter you'll be able to create and animate your first 3D scene directly in your browser.

Chapter 2, The Basic Components That Make Up a Three.js Application, explains the basic components that you need to understand when working with Three.js. You'll learn about lights, meshes, geometries, materials, and cameras. In this chapter, you also get an overview of the different lights Three.js provides and the cameras you can use in your scene.

Chapter 3, Working with Light Sources in Three.js, dives deeper into the different lights you can use in your scene. It shows examples and explains how to use a SpotLight, a DirectionLight, an AmbientLight, a PointLight, a HemisphereLight, and an AreaLight. Additionally, it also shows how to apply a lens flare effect on your light source.

Chapter 4, Working with Three.js Materials, talks about the materials available in Three.js that you can use on your meshes. It shows all the properties you can set to configure the materials for your specific use and provides interactive examples to experiment with the materials that are available in Three.js.

Chapter 5, Learning to Work with Geometries, is the first of two chapters that explore all the geometries that are provided by Three.js. In this chapter, you'll learn how to create and configure geometries in Three.js and you can experiment, using the provided interactive examples, with geometries such as Plane, Circle, Shape, Cube, Sphere, Cylinder, Torus, TorusKnot, and PolyHedron.

Chapter 6, Advanced Geometries and Binary Operations, continues where the previous chapter left off. It shows you how to configure and use the more advanced geometries that are provided by Three.js, such as Convex and Lathe. In this chapter, you'll also learn how to extrude 3D geometries from 2D shapes and how you can create new geometries by combining geometries using binary operations.

Chapter 7, Points and Sprites, explains how to use the sprites and points from Three.js. You'll learn how to create a point cloud from scratch, and from existing geometries. In this chapter, you'll also learn how you can modify the way the individual points look through the use of sprites and materials.

Chapter 8, Creating and Loading Advanced Meshes and Geometries, shows you how to import meshes and geometries from external sources. You'll learn how to use Three.js' internal JSON format to save geometries and scenes. This chapter also explains how to load models from formats such as OBJ, DAE, STL, CTM, PLY, and many more.

Chapter 9, Animations and Moving the Camera, explores the various types of animations you can use to make your scene come to life. You'll learn how to use the Tween.js library together with Three.js, and you'll learn how to work with animation models based on morhps and skeletons.

Chapter 10, Loading and Working with Textures, expands on Chapter 4, Working with Three.js Materials, where materials were introduced. In this chapter, we dive into the details of textures. This chapter introduces the various types of textures that are available and how you can control how a texture is applied to your mesh. Additionally, in this chapter you are shown how you can directly use the output from HTML5 video and canvas elements as input for your textures.

Chapter 11, Render Postprocessing, explores how you can use Three.js to apply postprocessing effects to your rendered scene. With postprocessing you can apply effects such as blur, tiltshift, and sepia to your rendered scene. Besides this, you'll also learn how to create your own postprocessing effect and create a custom vertex and fragment shader.

Chapter 12, Adding Physics and Sounds to Your Scene, explains how you can add physics to your Three.js scene. With physics you can detect collisions between objects, make them respond to gravity, and apply friction. This chapter shows how to do this with the Physijs JavaScript library. Additionally, this chapter also shows how you can add positional audio to a Three.js scene.