Chapter 1, Creating Your First 3D Scene with Three.js, covers the basic steps that you need to take to get started with the Three.js library. 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 the browser.

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

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

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

Chapter 5, Learning to Work with Geometries, is the first of two chapters that explores all the geometries that are provided by the Three.js library. In this chapter you'll learn how to create and configure geometries in Three.js and you can experiment by using the provided interactive examples, with geometries such as plane, circle, shape, cube, sphere, cylinder, Torus, TorusKnot, and PolyHedron.

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

Chapter 7, Particles and the Particle System, explains how to use the particle system from the Three.js library. You'll learn how to create a particle system from scratch, and from the existing geometries. In this chapter you'll also learn how you can modify the way the particles look through the use of sprites and particle 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 the Three.js library internal JSON format in order to save the geometries and scenes. This chapter also explains how to load models from formats like OBJ, DAE, STL, CTM, and PLY.

Chapter 9, Animations and Moving the Camera, explores the various types of animations that 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 the animation models based on morphs and skeletons.

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

Chapter 11, Custom Shaders and Render Post Processing, explores how you can use the Three.js library to apply the post processing effects to your rendered scene. With post processing you can apply effects, such as blur, tilt shift, and sepia to your rendered scene. Besides this, you'll also learn how to create your own post processing effect and create a custom vertex and fragment shader.

Chapter 12, Adding Physics to Your Scene with Physijs, 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 so with the Physics JavaScript library.

All that you need for this book is a text editor (for example, Sublime Text Editor) to play around with the examples and a modern web browser to access the examples. Some examples require a local web server, but you'll learn in Chapter 1 how to set up a very lightweight web server to use with the examples in this book.

This book is great for everyone who already knows JavaScript and wants to start with creating 3D graphics that run in any browser. You don't need to know anything about advanced math or WebGL, all that is needed is a general knowledge of JavaScript and HTML. The required materials and examples can be freely downloaded and all the tools used in this book are open source. So if you've ever wanted to learn how to create beautiful, interactive 3D graphics that run in any modern browser, this is the book for you.

In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "You can see in this code that besides setting the map property, we also set the bumpMap property to a texture."

A block of code is set as follows:

function createMesh(geom, texture, bump) {
    var texture = THREE.ImageUtils.loadTexture(
               "../assets/textures/general/" + texture)
    
    var mat = new THREE.MeshPhongMaterial();
    mat.map = texture;
    var bump = THREE.ImageUtils.loadTexture(
               "../assets/textures/general/" + bump)
    mat.bumpMap = bump;
    mat.bumpScale=0.2;
    var mesh = new THREE.Mesh(geom,mat);
    return mesh;
}

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold as shown:

function createParticles() {
  var material = new THREE.ParticleBasicMaterial({size:4});

  var geom = new THREE.Geometry();
  for (var x = -5 ; x < 5 ; x++) {
    for (var y = -5 ; y < 5 ; y++) {
      var particle = new THREE.Vector3(x*10,y*10,0);
      geom.vertices.push(particle);
    }
  }

  var system = new THREE.ParticleSystem(geom,material);
  scene.add(system);
}

Any command-line input or output is written as follows:

#git clone https://github.com/josdirksen/learning-threejs

New terms and important words are shown in bold as follows: "The first one uses the HTTP Server module."

Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "If you want to change this color, you can do so in the menu at the top-right corner, to a more prominent green color (#007700) and get the following result:".

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.

To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title via the subject of your message.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.