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

Creating THREE.PointCloud from an advanced geometry

As you remember, THREE.PointCloud renders each particle based on the vertices from the supplied geometry. This means that if we provide a complex geometry (for example, a torus knot or a tube), we can create THREE.PointCloud based on the vertices from that specific geometry. For this last section of this chapter, we'll create a torus knot, like the one we saw in the previous chapter, and render it as THREE.PointCloud.

We've already explained the torus knot in the previous chapter, so we won't go into much detail here. We're using the exact code from the previous chapter, and we've added a single menu option that you can use to transform the rendered mesh into THREE.PointCloud. You can find the example (10-create-particle-system-from-model.html) in the sources for this chapter. The following screenshot shows the example:

As you can see in the preceding screenshot, every vertex used to generate the torus knot is used as a particle. In this...

End of Section 7
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