Rendering to a canvas and using it as a texture

In this section, we will look at two different examples. First, we will look at how you can use the canvas to create a simple texture and apply it to a mesh, and after that, we'll go one step further and create a canvas that can be used as a bump map, using a randomly generated pattern.

Using the canvas as a texture

In the first example, we will use the Literally library (from http://literallycanvas.com/) to create an interactive canvas that you can draw on; see the bottom-left corner in the following screenshot. You can view this example at 09-canvas-texture. The following screenshot shows the example:

Anything that you draw on this canvas is directly rendered on the cube as a texture. Accomplishing this in Three.js is really simple, and it only takes a couple of steps. The first thing that we need to do is create a canvas element, and, for this specific example, configure it to be used with the Literally library, as follows:

<div class="fs...