HTML5 Canvas Cookbook

Creating a 3D world that you can explore

Now that we know how to create some basic 3D models with textures and lighting, we are now in a position to create our own 3D world. In this recipe, we'll create three sets of buffers—cube buffers, wall buffers, and floor buffers. We can use the cube buffers to render randomly placed crates throughout our world, the wall buffers to create four walls, and the floor buffers to create a floor and a ceiling (we can reuse the floor buffers for the ceiling buffers since they are the same shape). Next, we'll add keyboard event listeners to the document so that we can explore the world with the arrow keys and the mouse. Let's get started!

How to do it...

Follow these steps to create a 3D world full of randomly placed ...