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.
  • Book Overview & Buying Learning Three.js: The JavaScript 3D Library for WebGL - Second Edition
  • Table Of Contents Toc
  • Feedback & Rating 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)
Buy this Book
close
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
Buy this Book

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
close
Preface
Icon
Preface
Icon
What this book covers
Icon
What you need for this book
Icon
Who this book is for
Icon
Conventions
Icon
Reader feedback
Icon
Customer support
Free Chapter
1
1. Creating Your First 3D Scene with Three.js
Icon
1. Creating Your First 3D Scene with Three.js
Icon
Requirements to use Three.js
Icon
Getting the source code
Icon
Creating the HTML skeleton
Icon
Rendering and viewing a 3D object
Icon
Adding materials, lights, and shadows
Icon
Expanding your first scene with animations
Icon
Using dat.GUI to make experimenting easier
Icon
Automatically resize the output when browser size changes
Icon
Summary
2
2. Basic Components That Make Up a Three.js Scene
Icon
2. Basic Components That Make Up a Three.js Scene
Icon
Creating a scene
Icon
Geometries and meshes
Icon
Different cameras for different uses
Icon
Summary
3
3. Working with the Different Light Sources Available in Three.js
Icon
3. Working with the Different Light Sources Available in Three.js
Icon
Different kinds of lighting provided by Three.js
Icon
Basic lights
Icon
Special lights
Icon
Summary
4
4. Working with Three.js Materials
Icon
4. Working with Three.js Materials
Icon
Understanding common material properties
Icon
Starting with a simple mesh
Icon
Advanced materials
Icon
Materials you can use for a line geometry
Icon
Summary
5
5. Learning to Work with Geometries
Icon
5. Learning to Work with Geometries
Icon
The basic geometries provided by Three.js
Icon
Summary
6
6. Advanced Geometries and Binary Operations
Icon
6. Advanced Geometries and Binary Operations
Icon
THREE.ConvexGeometry
Icon
THREE.LatheGeometry
Icon
Creating 3D text
Icon
Using binary operations to combine meshes
Icon
Summary
7
7. Particles, Sprites, and the Point Cloud
Icon
7. Particles, Sprites, and the Point Cloud
Icon
Understanding particles
Icon
Particles, THREE.PointCloud, and THREE.PointCloudMaterial
Icon
Styling particles with the HTML5 canvas
Icon
Using textures to style particles
Icon
Working with sprite maps
Icon
Creating THREE.PointCloud from an advanced geometry
Icon
Summary
8
8. Creating and Loading Advanced Meshes and Geometries
Icon
8. Creating and Loading Advanced Meshes and Geometries
Icon
Geometry grouping and merging
Icon
Summary
9
9. Animations and Moving the Camera
Icon
9. Animations and Moving the Camera
Icon
Basic animations
Icon
Working with the camera
Icon
Morphing and skeletal animation
Icon
Creating animations using external models
Icon
Summary
10
10. Loading and Working with Textures
chevron up
Icon
10. Loading and Working with Textures
Icon
Using textures in materials
Icon
Advanced usage of textures
Icon
Summary
11
11. Custom Shaders and Render Postprocessing
Icon
11. Custom Shaders and Render Postprocessing
Icon
Setting up Three.js for postprocessing
Icon
Postprocessing passes
Icon
Creating custom postprocessing shaders
Icon
Summary
12
12. Adding Physics and Sounds to Your Scene
Icon
12. Adding Physics and Sounds to Your Scene
Icon
Creating a basic Three.js scene
Icon
Material properties
Icon
Basic supported shapes
Icon
Using constraints to limit movement of objects
Icon
Summary
13
Index
Icon
Index

Using textures in materials

There are different ways textures are used in Three.js. You can use them to define the colors of the mesh, but you can also use them to define shininess, bumps, and reflections. The first example we look at, though, is the most basic approach, where we use a texture to define the colors of the individual pixels of a mesh.

Loading a texture and applying it to a mesh

The most basic usage of a texture is when it's set as a map on a material. When you use this material to create a mesh, the mesh will be colored based on the supplied texture.

Loading a texture and using it on a mesh can be done in the following manner:

function createMesh(geom, imageFile) {
  var texture = THREE.ImageUtils.loadTexture("../assets/textures/general/" + imageFile)

  var mat = new THREE.MeshPhongMaterial();
  mat.map = texture;

  var mesh = new THREE.Mesh(geom, mat);
  return mesh;
}

In this code sample, we use the THREE.ImageUtils.loadTexture function to load an image file...

Unlock full access

Continue reading for free

A Packt free trial gives you instant online access to our library of over 7000 practical eBooks and videos, constantly updated with the latest in tech
Start a 7-day FREE trial
End of Section 2
Next Section

Create a Note

Modal Close icon
You need to login to use this feature.
notes
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

Delete Note

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

Edit Note

Modal Close icon
Write a note (max 255 characters)
Cancel
Update Note

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY