Book Image

Learning Three.js - the JavaScript 3D Library for WebGL

By : Jos Dirksen
Book Image

Learning Three.js - the JavaScript 3D Library for WebGL

By: Jos Dirksen

Overview of this book

Related Content you might be interested in

Current Title:

Small book image
Learning Three.js - the JavaScript 3D Library for WebGL
Jos Dirksen
Mar, 2015 | 422 pages
No titles found
Table of Contents (20 chapters)
Learning Three.js – the JavaScript 3D Library for WebGL Second Edition
Learning Three.js – the JavaScript 3D Library for WebGL Second Edition
Credits
Credits
About the Author
About the Author
Acknowledgments
Acknowledgments
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Creating Your First 3D Scene with Three.js
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
Basic Components That Make Up a Three.js Scene
Basic Components That Make Up a Three.js Scene
Creating a scene
Geometries and meshes
Different cameras for different uses
Summary
3
Working with the Different Light Sources Available in Three.js
Working with the Different Light Sources Available in Three.js
Different kinds of lighting provided by Three.js
Basic lights
Special lights
Summary
4
Working with Three.js Materials
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
Learning to Work with Geometries
Learning to Work with Geometries
The basic geometries provided by Three.js
Summary
6
Advanced Geometries and Binary Operations
Advanced Geometries and Binary Operations
THREE.ConvexGeometry
THREE.LatheGeometry
Creating 3D text
Using binary operations to combine meshes
Summary
7
Particles, Sprites, and the Point Cloud
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
Creating and Loading Advanced Meshes and Geometries
Creating and Loading Advanced Meshes and Geometries
Geometry grouping and merging
Summary
9
Animations and Moving the Camera
Animations and Moving the Camera
Basic animations
Working with the camera
Morphing and skeletal animation
Creating animations using external models
Summary
10
Loading and Working with Textures
Loading and Working with Textures
Using textures in materials
Advanced usage of textures
Summary
11
Custom Shaders and Render Postprocessing
Custom Shaders and Render Postprocessing
Setting up Three.js for postprocessing
Postprocessing passes
Creating custom postprocessing shaders
Summary
12
Adding Physics and Sounds to Your Scene
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
Index
Index

Chapter 2. Basic Components That Make Up a Three.js Scene

In the previous chapter, you learned the basics of Three.js. We showed a couple of examples, and you created your first complete Three.js scene. In this chapter, we'll dive a bit deeper into Three.js and explain the basic components that make up a Three.js scene. In this chapter, you'll explore the following topics:

  • The components that are used in a Three.js scene

  • What you can do with the THREE.Scene object

  • How geometries and meshes are related

  • The difference between the orthographic and perspective cameras

We start with looking at how you can create a scene and add objects.

Previous Section
End of Section 1
Next Section