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
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
chevron up
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 a basic Three.js scene

Setting up a Three.js scene for Physijs is very simple and only takes a couple of steps. The first thing we need to do is include the correct JavaScript file, which you can get from the GitHub repository at http://chandlerprall.github.io/Physijs/. Add the Physijs library to your HTML page like this:

<script type="text/javascript" src="../libs/physi.js"></script>

Simulating a scene is rather processor intensive. If we run all the simulation computations on the render thread (since JavaScript is single threaded in nature), it will seriously affect the frame rate of our scene. To compensate for that, Physijs does its calculations in a background thread. This background thread is provided through the "web workers" specification that is implemented by most modern browsers. With this specification, you can run CPU-intensive tasks in a separate thread, thus not affecting the rendering. More information on web workers can...

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