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
chevron up
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
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

Different cameras for different uses

There are two different camera types in Three.js: the orthographic camera and the perspective camera. In Chapter 3, Working with the Different Light Sources Available in Three.js, we'll have a much more detailed look at how to work with these cameras, so in this chapter, I'll stick to the basics. The best way to explain the differences between these cameras is by looking at a couple of examples.

Orthographic camera versus perspective camera

In the examples for this chapter, you can find a demo called 07-both-cameras.html. When you open this example, you'll see something like this:

Orthographic camera versus perspective camera

This is called a perspective view and is the most natural view. As you can see from this figure, the farther away the cubes are from the camera, the smaller they are rendered.

If we change the camera to the other type supported by Three.js, the orthographic camera, you'll see the following view of the same scene:

Orthographic camera versus perspective camera

With the orthographic camera, all the cubes are...

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