Blender 3D and Web GL – Part 1

In this series, we will be creating a realistic scene inside your web browser. Our subject of interest is Man’s Best Friend.

Man's Best Friend

We will be attempting to model and render a dog inside your browser

In order to achieve this we will model our dog using 3D modelling software.

Introduction to Blender 3D

Blender 3D is a free and open source software solution for modelling and animation. It is a very mature and advanced product, and a skilled artist can use it to create highly professional results. We will be starting right from square one, and covering this project from first principles. For full documentation on Blender, see the online book Noob to Pro.

The first step is to download and install Blender. In this series, we will be using v2.75 however if you have a slightly older or newer version the instructions in this series should still work. Once installed, open up the application.

Blender 3D

For users new to 3D modelling, the number of different options and tools available can be a little overwhelming at first. For this reason, we will start off by only using a very small subset of these tools. We will not be building anything in this first lesson: we need to learn to walk before we can run. So the aim today is just to familiarize yourself with some of the basics of Blender.

If you have a mouse wheel, hold it down and move the mouse to rotate around the scene. You can scroll the mouse wheel up to move into the scene or down to move out of the scene.

Moving an object

There are red, green and blue arrows attached to the point inside the square. These correspond to the axes (or dimensions) X, Y and Z. If you have ever done any work with CSS or 2D art programs, you probably have already heard of RGB – red, green, blue. This is a convenient way of remembering which color corresponds with which axis: RGB = XYZ

If you left click on the red arrow and drag the mouse, the square will move along just the X axis

Move Along X Axis

If you want to move the object along more than one axis at a time, right click on the object and drag it around.


Because your screen is actually in 2 dimensions rather than 3, it is hard to tell which axes it is moving in and by how much. Because of this, Blender shows how much it is moving in each direction by displaying the delta values Dx, Dy and Dz below you object. If you decide that you would prefer not to move it and put it back to the original position, click the right mouse button again, or press the Esc button. If you decide you are happy with the position, click the left mouse button.

Rotate an object


To rotate an object, you can either click on the rotate button in the Transform menu, or click the r button.

Scaling an object


Either click on Scale in the Transform menu, or press the s button. The mode changes so that scale the object bigger by moving the mouse away from the center of the object, and smaller by moving the mouse nearer the center of the object. Numbers at the bottom of the screen display the numbers that the size of the object is being multiplied by. In the image above, it shows negative numbers. This is because I moved the mouse through the center of the object and inverted the object. As it is a square, the object still looks the same. In order to see the effect that this has on a more complex object, we will shortly play with the monkey object.

Deleting an object

Press the x button. A confirmation dialog appears. Left click to confirm that the object should be deleted

Monkeying Around

On the far left hand side of the screen there are a number of tabs. Click on the create tab to reveal a number of primitive objects that can be create with just one click of the left mouse


Click on the left button several times. At first it appears that it is not doing anything after the first click. However this is not so. Right click and drag on the monkey mesh. This reveals that more than one monkey mesh has been created, they were just created in the same position. Use the right mouse button to change your selection from monkey to monkey. Keep dragging the monkey meshes around until there are no more hidden monkeys. Experiment with rotating some monkeys around.

Now press the s key again. Drag the mouse through the center point of the monkey. This inverts the monkey.


Edit Mode

All of the playing around that we have done so far has been in object mode. You have seen that this mode is used for creating, selecting, moving, rotating and re-sizing objects.

There are several other modes available, but the two most common modes are object mode, and edit mode.


You can either left click on the mode to change your mode, or press the Tab button to alternate between object mode and edit mode. When in edit mode, right click on different areas of the mesh object. You will see that different points are selected. Now drag with the right mouse button to move it. As with object mode, you can revert back to the original position by clicking the right mouse button again, or click the left mouse button once you are happy with the position.


Wrap Up

This lesson only covered the most basic features of Blender. Although there is a huge amount to learn in Blender, hopefully you will be starting to appreciate that Blender has been designed to be an easy to use as well as powerful modeling application. We will keep learning one small step at a time, so that we don’t get too lost and be tempted to give up.

Now that we understand the basics, we are ready to start modelling our dog in Part 2

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s