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 6. Advanced Geometries and Binary Operations

In the previous chapter, we showed you all the basic geometries provided by Three.js. Besides these basic geometries, Three.js also offers a set of more advanced and specialized objects. In this chapter, we'll show you these advanced geometries and cover the following subjects:

  • How to use advanced geometries such as THREE.ConvexGeometry, THREE.LatheGeometry, and THREE.TubeGeometry.

  • How to create 3D shapes from 2D shapes using THREE.ExtrudeGeometry. We'll do this based on a 2D shape drawn using functionality provided by Three.js, and we'll show an example where we create a 3D shape based on an externally loaded SVG image.

  • If you want to create custom shapes yourself, you can easily amend the ones we've discussed in the previous chapters. Three.js, however, also offers a THREE.ParamtericGeometry object. With this object, you can create a geometry based on a set of equations.

  • Finally, we'll look at how you can create 3D text effects using THREE...

Previous Section
End of Section 1
Next Section