Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Advanced Search Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Learning Three.js: The JavaScript 3D Library for WebGL - Second Edition
  • Toc
  • feedback
Learning Three.js: The JavaScript 3D Library for WebGL - Second Edition

Learning Three.js: The JavaScript 3D Library for WebGL - Second Edition

By : Jos Dirksen
4.4 (14)
close
Learning Three.js: The JavaScript 3D Library for WebGL - Second Edition

Learning Three.js: The JavaScript 3D Library for WebGL - Second Edition

4.4 (14)
By: Jos Dirksen

Overview of this book

If you know JavaScript and want to start creating 3D graphics that run in any browser, this book is a great choice for you. You don't need to know anything about math or WebGL; all that you need is general knowledge of JavaScript and HTML.
Table of Contents (14 chapters)
close
close
Preface
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Free Chapter
1
1. Creating Your First 3D Scene with Three.js
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
2
2. Basic Components That Make Up a Three.js Scene
2. Basic Components That Make Up a Three.js Scene
Creating a scene
Geometries and meshes
Different cameras for different uses
Summary
3
3. Working with the Different Light Sources Available in Three.js
3. Working with the Different Light Sources Available in Three.js
Different kinds of lighting provided by Three.js
Basic lights
Special lights
Summary
4
4. Working with Three.js Materials
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
5
5. Learning to Work with Geometries
5. Learning to Work with Geometries
The basic geometries provided by Three.js
Summary
6
6. Advanced Geometries and Binary Operations
6. Advanced Geometries and Binary Operations
THREE.ConvexGeometry
THREE.LatheGeometry
Creating 3D text
Using binary operations to combine meshes
Summary
7
7. Particles, Sprites, and the Point Cloud
chevron up
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
8
8. Creating and Loading Advanced Meshes and Geometries
8. Creating and Loading Advanced Meshes and Geometries
Geometry grouping and merging
Summary
9
9. Animations and Moving the Camera
9. Animations and Moving the Camera
Basic animations
Working with the camera
Morphing and skeletal animation
Creating animations using external models
Summary
10
10. Loading and Working with Textures
10. Loading and Working with Textures
Using textures in materials
Advanced usage of textures
Summary
11
11. Custom Shaders and Render Postprocessing
11. Custom Shaders and Render Postprocessing
Setting up Three.js for postprocessing
Postprocessing passes
Creating custom postprocessing shaders
Summary
12
12. Adding Physics and Sounds to Your Scene
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
13
Index
Index

Chapter 7. Particles, Sprites, and the Point Cloud

In the previous chapters, we discussed the most important concepts, objects, and APIs that Three.js has to offer. In this chapter, we'll look into the only concept we've skipped until now: particles. With particles (sometimes also called sprites), it is very easy to create many small objects that you can use to simulate rain, snow, smoke, and other interesting effects. For instance, you can render individual geometries as a set of particles and control these particles separately. In this chapter, we'll explore the various particle features provided by Three.js. To be more specific, we'll look at the following subjects in this chapter:

  • Creating and styling particles using THREE.SpriteMaterial
  • Using a point cloud to create a grouped set of particles
  • Creating a point cloud from existing geometries
  • Animating particles and the particle system
  • Using a texture to style the particles
  • Using the canvas to style a particle...
End of Section 1
Next Section
bookmark search playlist font-size

Change the font size

margin-width

Change margin width

day-mode

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Delete Bookmark

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete