Learn Three.js - Third Edition

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: ...