Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library 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 Three.js Cookbook
  • Table Of Contents Toc
Three.js Cookbook

Three.js Cookbook

By : Jos Dirksen
4 (8)
Buy this Book
close
close
Three.js Cookbook

Three.js Cookbook

4 (8)
By: Jos Dirksen
Buy this Book

Overview of this book

This book is ideal for anyone who already knows JavaScript and would like to get a broad understanding of Three.js quickly, or for those of you who have a basic grasp of using Three.js but want to really make an impact with your 3D visualizations by learning its advanced features. To apply the recipes in this book you don’t need to know anything about WebGL; all you need is some general knowledge about JavaScript and HTML.
Table of Contents (9 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
Sections
Icon
Conventions
Icon
Reader feedback
Icon
Customer support
Lock Free Chapter
1
1. Getting Started
chevron up
Icon
1. Getting Started
Icon
Introduction
Icon
Getting started with the WebGL renderer
Icon
Getting started with the Canvas renderer
Icon
Getting started with the CSS 3D renderer
Icon
Detecting WebGL support
Icon
Setting up an animation loop
Icon
Determining the frame rate for your scene
Icon
Controlling the variables used in the scene
Icon
Setting up a local web server with Python
Icon
Setting up a local web server with Node.js
Icon
Setting up a local web server using Mongoose
Icon
Solving cross-origin-domain error messages in Chrome
Icon
Solving cross-origin-domain error messages in Firefox
Icon
Adding keyboard controls
Icon
Loading textures asynchronously
Icon
Loading models asynchronously
Icon
Loading models asynchronously with progress
Icon
Loading other resources asynchronously with progress
Icon
Waiting until resources are loaded
Icon
Dragging a file from the desktop to the scene
2
2. Geometries and Meshes
Icon
2. Geometries and Meshes
Icon
Introduction
Icon
Rotating an object around its own axis
Icon
Rotating an object around a point in space
Icon
Informing Three.js about updates
Icon
Working with a large number of objects
Icon
Creating geometries from height maps
Icon
Pointing an object to another object
Icon
Writing text in 3D
Icon
Rendering 3D formulas as 3D geometries
Icon
Extending Three.js with a custom geometry object
Icon
Creating a spline curve between two points
Icon
Creating and exporting a model from Blender
Icon
Using OBJMTLLoader with multiple materials
Icon
Applying matrix transformations
3
3. Working with the Camera
Icon
3. Working with the Camera
Icon
Introduction
Icon
Making the camera follow an object
Icon
Zooming the camera to an object
Icon
Using a perspective camera
Icon
Using an orthographic camera
Icon
Creating a 2D overlay
Icon
Rotating the camera around a scene
Icon
Matching the rendered view to a resized browser
Icon
Converting world coordinates to screen coordinates
Icon
Selecting an object in the scene
4
4. Materials and Textures
Icon
4. Materials and Textures
Icon
Introduction
Icon
Adding depth to a mesh with a bump map
Icon
Adding depth to a mesh with a normal map
Icon
Using HTML canvas as a texture
Icon
Using HTML video as a texture
Icon
Creating a mesh with multiple materials
Icon
Using separate materials for faces
Icon
Setting up repeating textures
Icon
Making part of an object transparent
Icon
Using a cubemap to create reflective materials
Icon
Using a dynamic cubemap to create reflective materials
Icon
Using Blender to create custom UV mapping
Icon
Configuring blend modes
Icon
Using a shadow map for fixed shadows
5
5. Lights and Custom Shaders
Icon
5. Lights and Custom Shaders
Icon
Introduction
Icon
Creating shadows with THREE.SpotLight
Icon
Creating shadows with THREE.DirectionalLight
Icon
Softening lights by adding ambient lighting
Icon
Using THREE.HemisphereLight for natural lighting
Icon
Adding a moving all-directional light
Icon
Moving a light source along a path
Icon
Making a light source follow an object
Icon
Creating a custom vertex shader
Icon
Creating a custom fragment shader
6
6. Point Clouds and Postprocessing
Icon
6. Point Clouds and Postprocessing
Icon
Introduction
Icon
Creating a point cloud based on a geometry
Icon
Creating a point cloud from scratch
Icon
Coloring the individual points in a point cloud
Icon
Styling individual points
Icon
Moving individual points of a point cloud
Icon
Exploding a point cloud
Icon
Setting up the basic postprocessing pipeline
Icon
Creating custom postprocessing steps
Icon
Saving WebGL output to disk
7
7. Animation and Physics
Icon
7. Animation and Physics
Icon
Introduction
Icon
Creating animations with Tween.js
Icon
Animating using morph targets
Icon
Animating with skeletons
Icon
Using morph animations created in Blender
Icon
Using skeleton animations created in Blender
Icon
Adding a simple collision detection
Icon
Saving a movie of an animation in Chrome
Icon
Dragging and dropping objects around a scene
Icon
Adding a physics engine
8
Index
Icon
Index

Loading models asynchronously

In the Loading textures asynchronously recipe, we explained that Three.js offers helper functions to load different types of resources asynchronously. In this recipe, we'll look at how you can use the THREE.JSONLoader object to load models asynchronously.

Getting ready

Before you get started with this recipe, make sure that you've walked through the steps explained in the Getting ready section of the Loading textures asynchronously recipe. In the following section, we'll reference the JavaScript callbacks defined in the Getting ready section of that recipe.

How to do it...

  1. Three.js also allows you to easily load external models. The following function shows you how to do this for the JSON models' Three.js uses. The same, however, applies to any of the other model loaders:
        function loadModel(modelUrl) {
      var jsonLoader = new THREE.JSONLoader();
      jsonLoader.load(modelUrl, onLoadCallback, null);
    }
  2. The jsonLoader.load function takes the following three arguments:
    • The first one is the location of the model you want to load
    • The second is the callback to call when the model is successfully loaded
    • The final parameter is the one that we can specify the path from where the texture images should be loaded
  3. When we call this function, you'll see the following output on the console:
    How to do it...

There is more...

With this approach, the JSONLoader object doesn't provide any feedback on how much it has loaded. If you want to load large models, it is nice to know something about the progress. The JSONLoader object also provides an alternative way of loading models that also provides progress. In the Load model asynchronously with progress recipe, we show you how to load a model and provide feedback on the progress. Besides the THREE.JSONLoader object, which loads Three.js' own proprietary models, Three.js is also shipped with a large number of loaders that you can use for other model formats. For an overview of what is provided by Three.js, please refer to https://github.com/mrdoob/three.js/tree/master/examples/js/loaders.

CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Three.js Cookbook
End of Section 1
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

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

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon