Three.js Cookbook

Book Image

Three.js Cookbook

By : Jos Dirksen

Book Image

Three.js Cookbook

By: Jos Dirksen

Overview of this book

Three.js Cookbook

Three.js Cookbook

Credits

About the Author

About the Author

Acknowledgments

Acknowledgments

About the Reviewers

About the Reviewers

www.PacktPub.com

www.PacktPub.com

Preface

Free Chapter

Getting Started

Getting Started

Getting started with the WebGL renderer

Getting started with the Canvas renderer

Getting started with the CSS 3D renderer

Detecting WebGL support

Setting up an animation loop

Determining the frame rate for your scene

Controlling the variables used in the scene

Setting up a local web server with Python

Setting up a local web server with Node.js

Setting up a local web server using Mongoose

Solving cross-origin-domain error messages in Chrome

Solving cross-origin-domain error messages in Firefox

Adding keyboard controls

Loading textures asynchronously

Loading models asynchronously

Loading models asynchronously with progress

Loading other resources asynchronously with progress

Waiting until resources are loaded

Dragging a file from the desktop to the scene

Geometries and Meshes

Geometries and Meshes

Rotating an object around its own axis

Rotating an object around a point in space

Informing Three.js about updates

Working with a large number of objects

Creating geometries from height maps

Pointing an object to another object

Writing text in 3D

Rendering 3D formulas as 3D geometries

Extending Three.js with a custom geometry object

Creating a spline curve between two points

Creating and exporting a model from Blender

Using OBJMTLLoader with multiple materials

Applying matrix transformations

Working with the Camera

Working with the Camera

Making the camera follow an object

Zooming the camera to an object

Using a perspective camera

Using an orthographic camera

Creating a 2D overlay

Rotating the camera around a scene

Matching the rendered view to a resized browser

Converting world coordinates to screen coordinates

Selecting an object in the scene

Materials and Textures

Materials and Textures

Adding depth to a mesh with a bump map

Adding depth to a mesh with a normal map

Using HTML canvas as a texture

Using HTML video as a texture

Creating a mesh with multiple materials

Using separate materials for faces

Setting up repeating textures

Making part of an object transparent

Using a cubemap to create reflective materials

Using a dynamic cubemap to create reflective materials

Using Blender to create custom UV mapping

Configuring blend modes

Using a shadow map for fixed shadows

Lights and Custom Shaders

Lights and Custom Shaders

Creating shadows with THREE.SpotLight

Creating shadows with THREE.DirectionalLight

Softening lights by adding ambient lighting

Using THREE.HemisphereLight for natural lighting

Adding a moving all-directional light

Moving a light source along a path

Making a light source follow an object

Creating a custom vertex shader

Creating a custom fragment shader

Point Clouds and Postprocessing

Point Clouds and Postprocessing

Creating a point cloud based on a geometry

Creating a point cloud from scratch

Coloring the individual points in a point cloud

Styling individual points

Moving individual points of a point cloud

Exploding a point cloud

Setting up the basic postprocessing pipeline

Creating custom postprocessing steps

Saving WebGL output to disk

Animation and Physics

Animation and Physics

Creating animations with Tween.js

Animating using morph targets

Animating with skeletons

Using morph animations created in Blender

Using skeleton animations created in Blender

Adding a simple collision detection

Saving a movie of an animation in Chrome

Dragging and dropping objects around a scene

Adding a physics engine

Index

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

Setting up an animation loop

In the recipes at the beginning of this chapter, we showed you how to set up a basic Three.js scene, using one of the available renderers. If you want to add animations to your Three.js scene, for instance, to move the camera around or rotate an object, you'll need to call the render function multiple times. In the old days of JavaScript, you had to control this yourself using the setTimeout or setInterval JavaScript functions. The problem with these functions is that they don't take into account what is happening in your browser. For instance, your page will be hidden or the Three.js scene might be scrolled out of view. A better solution for animations, and the one that we'll use in this recipe, is requestAnimationFrame. With this function, your browser determines when it is the best time to call the animation code.

Getting ready

For this recipe, we will use the 01.05-setup-animation-loop.html example HTML file. To see the animation in action, just open this file in your browser:

This example uses the WebGL renderer. You can of course apply this same recipe to the other renderers we've discussed in this chapter.

Let's take a look at the steps we need to take to set up such an animation loop.

How to do it...

To create an animation loop you don't have to change much in your existing code:

Let's first look at how to use requestAnimationFrame for rendering. For this, we've created a render function:
```
    function render() {
      renderer.render(scene, camera);
      scene.getObjectByName('cube').rotation.x += 0.05;
      requestAnimationFrame(render);
    }
```
As you can see, we pass the render function as an argument to request a frame for animation. This will cause the render function to be called at a regular interval. In the render function, we will also update the rotation of the x axis of the cube to show you that the scene is re-rendered.

To use this function in the recipes, which we saw at the beginning of this chapter, we just have to replace this call:

    function init() {
      ...
      // call the render function
      renderer.render(scene, camera);
    }
With the following:
    function init() {
      ...
      // call the render function
      render();
    }

You will now have your own animation loop, so any changes made to your model, camera, or other objects in the scene can now be done from within the render() function.

See also

We mentioned that in this recipe, we've used the THREE.WebGLRenderer object as an example. You can of course also apply this to the skeletons from the Getting started with the Canvas renderer recipe or Getting started with the CSS 3D renderer recipe.
What will be of interest to you also is the Determining the frame rate of your scene recipe, where we'll add additional functionality to the skeletons so you can easily see how often the render function is called by requestAnimationFrame.