Search form

'3D for Beginners:' Basic Buttons — Part 1

In this first of a series of excerpts from 3D for the Web, Carol MacGillivray and Anthony Head cover the basics of 3D for beginners and explain why we all love buttons

All images from 3D for the Web by Carol MacGillivray and Anthony Head. Reprinted with permission.

All images from 3D for the Web by Carol MacGillivray and Anthony Head. Reprinted with permission.

Why We All Love Buttons

As anyone who has been to the science museum with a kid knows, seeing a button creates an irresistible urge to press it. Indeed, young kids often skip from one exhibit to another pressing buttons as they go and not even waiting to see the effect the button has. Adults do it too. Have you ever pressed the button at a pedestrian traffic light even though the wait light is showing, as if it will make the little red man turn green faster? Or pumped an elevator button to make the lift hurry up?

So how does this translate to a website? Websites consist of buttons, graphics and text. The idea of a button or hyperlink is crucial to all website navigation. This button could be a text or a graphic. It is important that all visitors to your site can first identify what a button is, and that having found it, they are motivated to click on that button to get through to further information on your site.

As we have already indicated, a 3D button oozes appeal. There is no trouble recognizing it, as it looks like a button from the real world, and on a website we have an added advantage in helping the visitor hit that button. Website buttons inherently have three states. First, the dormant state of the button waiting to be noticed. Secondly, the rollover state as the mouse hovers over it, will the visitor succumb to the urge? Thirdly, the mouse click on the button. Hurrah, your audience is snared; they are traveling deeper into your website.

So let us start by building a simple button in 3D. This is an easy exercise to get you going, but it provides the stepping stone to so much more.

Open your 3D package and you will see a shocking amount of interface even the simplest 3D software program is deep. It has to be; this is in essence the same sort of software that brought you Toy Story and the effects in The Matrix. Do not panic, you have to start somewhere, once we have guided you through the tutorials in this book; you will have accumulated a lot of knowledge.

Whatever 3D software you have, you are likely to have the default four windows. Three of these windows give the orthographic (non-perspective) view of anything you build in them. Typically your interface will have a front elevation, side elevation and top view. The fourth window will allow you to move your view of on object in an isometric or Perspective view.

If you are a beginner, when you create an object and manipulate it, it is best to use the orthographic views, as the Perspective view is more for looking around your object and checking you like it from all angles.

Working in a 3D environment, every point in space can be mapped using coordinates on three axes: x, y and z. A virtual object is created by joining points or vertices in this space.

It takes a while to get used to moving around between these windows, so if you are completely new to the software, try this simple exercise to get warmed up.

[Figure 1] Stacking Boxes. The four views in 3ds max.

[Figure 1] Stacking Boxes. The four views in 3ds max.

Introduction to Modeling in 3D: Building Blocks

Create two separate standard primitive boxes in the top viewport, any size, and stack one on top of the other.

What To Do Click Create>Standard Primitives>Box. Click and drag in the top viewport to create a rectangle, then drag again (three dimensions, remember). You will not see anything happen in the top viewport, but if you look at the others, you will see a new height dimension being added. Make another box. Put one box on top of the other by using the Select and Move icon in the Tool Bar. Try this first of all in the perspective viewport, and you will discover how hard it can be to manipulate in freeform 3D space, but if you use the three orthographic views, it is a simple matter to arrange a stack of boxes by sticking to two axes at a time (Figure 1). Try and develop an ease with looking and moving from one window to another, and check the result in your perspective viewport. (Incidentally, it is always good practice to start creating any object in the top viewport.)

Top Tip It is usual to keep the three orthographic views as showing objects in Wireframe, and the perspective viewport showing Smooth Highlights. It is often helpful to tick Edged Faces, so you can see the model and the structure together. You can change from one mode to another by R-clicking in the top-left of a viewport over the named view, and selecting what you wish from the drop down menu. (Alternatively F3 will toggle between Wireframe and Smooth Highlights, and F4 toggles Edged Faces on and off.)

How to Make a Simple 3D Button Use simple primitive objects to make a realistic button.

What To Do This button is made from two standard primitives. First the button itself is made from a cylinder. Create a cylinder that looks suitably proportioned in the top viewport. Notice that as you make your cylinder there are different parameter counters on the screen. All cylinders are defined by their radius and height. If you are a precise person, you can type values in here to make sure the button is the correct proportion for you. The other options you are given are whether the cylinder is capped top and bottom, how many height segments it has, and how many sides make up the perimeter. You can see in this perspective view that this cylinder has 5 height segments and 18 sides. It also has two cap segments (Figure 2).

[Figure 2] Standard Primitive >Cylinder (shown as Smooth+Highlights with Edged Faces on).

[Figure 2] Standard Primitive >Cylinder (shown as Smooth+Highlights with Edged Faces on).

Note Whenever you set out to build anything in 3D, it is a good idea to think about these extra parameters, as they are the key to the all important face count when transferring to Shockwave. More of this later. Because your button will end up as a still at this at this stage, we can be as generous as we like with our face count.

Now comes the fun bit. We want the cylinder to look more realistic and put a dimple in the middle. To do this we have to tweak it at Sub-Object level, and this means converting it to an Editable Mesh. In 3ds max this is done by selecting the object and R-clicking in a viewport, a drop down menu appears and you choose Convert to Editable Mesh. When you do this the modifier stack for your cylinder will have a new label: Editable Mesh.

Note The modifier stack allows you to travel up and down an objects history. Because the program reads the stack from the bottom to the top, you can change parameters from the beginning of an objects history. In 3ds max, converting the object to an Editable Mesh collapses the stack; i.e. you can no longer change the cylinders mesh parameters. In more complex modeling, it is a good idea to save versions of your work before you commit to this action.

[Figure 3] Sub-Object mode. Text and icons.

[Figure 3] Sub-Object mode. Text and icons.

Editable Meshes have a drop down menu for Sub-Object manipulation. Open it out and have a look. This is the heart of all modeling in 3D (Figure 3).

  • A vertex is a single point on your model.
  • An edge is the line between two vertices.
  • A face is a planar triangular surface.
  • A polygon is made from two faces, and is the plane between four vertices.
  • The element is the whole object.

Click on each and select some to see what you get. If you select vertex, then all the points show up in blue, selected points are red.

In Sub-Object mode we can manipulate each individual vertex, or groups of them. Pick the middle vertex at the top of your cylinder and move it up and down. If you have selected from the top viewport, you may find you have picked up the middle vertex at the bottom too. Turn on Ignore Backfacing, and select it again. Pulling the vertex down creates a dip, but rather a harsh one. Undo (Control-Z) and return the vertices to their original position. We are going to ease the harshness of the dimple in the button by using Soft Selection. With the center vertex still selected, open out Soft Selection and tick it on. Crank the Falloff slider up until the inner ring of vertices turn yellow. Now tweak the center vertex down to create a smooth dip in the top of your button (Figure 4).

[Figure 4] Creating a dip in the button.

[Figure 4] Creating a dip in the button.

Top Tip

You can toggle on and off locking your selection by hitting the space bar. This can be very useful if you are moving from one viewport to another a lot.

If you have selected from the top viewport, you may find you have picked up the middle vertex at the bottom too. Turn on Ignore Backfacing, and select it again. Pulling the vertex down creates a dip, but rather a harsh one. Undo (Control-Z) and return the vertices to their original position. We are going to ease the harshness of the dimple in the button by using Soft Selection. With the center vertex still selected, open out Soft Selection and tick it on. Crank the Falloff slider up until the inner ring of vertices turn yellow. Now tweak the center vertex down to create a smooth dip in the top of your button (Figure 4).

Our button still looks a bit jagged, and so all that remains is to smooth it. We do this by sub-dividing the polygons. In 3ds max this is done by adding a Meshsmooth modifier. (Other programs such as Maya call it Sub-Division.)

Leave Sub-Object mode, and with your cylinder selected, look down the Modifier List to find the Meshsmooth modifier. Add it to the cylinders stack. You will see a box marked Iterations make the value of this 1. The polygons on your button will increase by approximately fourfold. Your button will now look smooth and attractive.

Note It is worth noting at this point that at the moment polygon count is not an issue for us if it were we could achieve a smoother model with fewer polygons by slightly more complex methods. For now let us revel in the liberation of being able to use as many polygons as we want.

Now to make the collar around the button. This is made from another standard primitive; the torus. Click on Create and select a Torus. Make this in the top viewport, if you start by centering it on the center of your cylinder, then you will end up with it in the correct position. You will notice that there are two separate radius parameters for your torus or donut, so you can decide on the width of the collar, you can also change the number of segments to make it smoother. As we are being generous, let us make it 48 segments to give an even, smooth look, as the finished object will be metallic. Now convert your torus to an Editable Mesh, just as you did the cylinder.

[Figure 5] Deleting the lower half of the torus.

[Figure 5] Deleting the lower half of the torus.

[Figure 6] The Material Editor (Accessed by hotkey M on the keyboard).

[Figure 6] The Material Editor (Accessed by hotkey M on the keyboard).

Choose polygons in Sub-Object mode, tick off Ignore Backfacing and select all the polygons in the lower half of your torus (Figure 5).

Now press Delete. To make our button collar more realistic, it would be nice to flatten it a bit. To do this leave Sub-Object mode and select Melt from the Modifier List. Add it to the torus stack. Experiment with this modifier. There are different settings, which make the Mesh of an object relax and mimic melting. I found an amount of 4 on the default Ice Melt to be about right.

Note One of the confusing things to a beginner is how 3D programs give different modifiers widely varied parameters scales; some slider settings are increments of 0.01 and others go up to tens of thousands. It is often worth moving the slider about a bit first so you can get a feel for the effect it is having.

Make sure your collar and button fit together snugly. You can do this by examining it in the perspective viewport. When you are happy, hit Quick Render (the green teapot on the top tool bar. If you cannot see it, drag the tool bar to the left with the hand icon) and take a look at your button. Looking good, now let us give it some materials.

Select your button and open the Material Editor (Figure 6). You will see a number of sample gray slots containing spheres. Select one and click on the box next to Diffuse. A color chart pops up and you can select a red color for your button. We want the button to be a bit shiny, so increase the Specularity and Glossiness until the sample slot material looks suitable. Apply it to your button by either dragging and dropping or using the Assign Material to Selection button. Your button will go red as it takes on the assigned material.

Note This is the most basic way materials can be used, simply assigning a color and light absorbency to an object. When we need to export materials using Shockwave, we can only use relatively simple materials like this, or enhance them by using materials created by us as bitmaps. Often this is enough to create great graphics, but the material options for ordinary export are manifold. No material can be treated in isolation; it is dependant on a huge number of influences like lighting, atmosphere and proximity of reflected objects. There are any number of ways of achieving the desired look and lighting and materials are an art in their own right.

[Figure 7] Material/Map Browser.

[Figure 7] Material/Map Browser.

Now to give the collar a metallic look: select the collar and choose another material sample slot. The default gray can remain the same, but increase the Specular level to about 75 to make the ring shiny, and use your judgment on how glossy it should be (I opted for 20). Now scroll down to the Maps Rollout and open it. You will see a whole lot of extra parameters available. If you click in the box labeled None next to Reflect, a Map Browser will pop up that offers you a lot of options for different maps to use with your material. The identifying symbol for a map is a green square. Choose Raytrace from the Browser by double-clicking it (Figure 7).

Set the amount to 25. The sample slot will not change, because Raytrace instructs the software to calculate reflections from the scene, any Raytracing will only be revealed when we render. Assign the metallic material to the collar in the scene and we will add some lights to make the object more realistic.

[Figure 8] Creating lights in 3ds max.

[Figure 8] Creating lights in 3ds max.

Note The default lighting in a 3D program is ambient. Ambient light means a flat uniform light emanating from each object, regardless of the light source. It is fine for general purposes, but fatal to bringing any quality of light in a scene. There are three basic lights in most 3D programs: spotlights, directional lights and omnis. Direct lights mimic distant spotlights like the sun, producing parallel shadows. Omnis are more likely to be fill lights, but can also be used as highlighters along with target spotlights. The look of a 3D scene is not as intuitive as live action is for a Lighting Photographer. We cannot see the light, as it is virtual, but have to check it by rendering previews. Lighting is 5% setting up and 95% revisions and adjustments.

Click on Create>Lights (Figure 8).

Choose an Omni light; this is a light that shines all around equally, rather than directionally as a Target Spot. The default brightness is 1 (called Multiplier in 3D Studio Max) and this will be our highlighter. Place the light above and to the right of your button, at an angle of approximately 45 degrees. Create another Omni and position it to the left of your button, and slightly lower, this will be our fill light. Change the Multiplier to about 0.5 so it is half as bright. Now render from your perspective viewport. The collar should be reflecting the red of the button and you should have some pleasing highlights on the finished surfaces (Figure 9).

[Figure 9] The rendered button.

[Figure 9] The rendered button.

Now all that remains is to get your button ready for the Web.

To learn more about interactive 3D animation using 3ds max, Flash and Director, check out 3D for the Web by Carol MacGillivray and Anthony Head; Burlington, MA: Focal Press, 2005; 328 pages with illustrations and CD-ROM. ISBN 0-240-51910-8 ($36.95). more about the book and check back to Animation World Magazine frequently to read new excerpts.

Carol MacGillivray was already a successful film editor before forming the pop video production company, Giblets with three friends who were animators and directors. Giblets specialized in combining media, mixing live action with 2D and 3D animation in an almost pre-digital era. Although they worked with many stars, Giblets, are most famous for bringing about the re-release of a trilogy of Jackie Wilson songs, starting with the clay animation video for Reet Petite that was a number 1 hit in 1987. Carol still has the gold disc hanging in her loo! After teaching at the Royal College of Art, Carol became interested in the new digital technology and was given an AHRB award to study an MA in Digital Moving Image at London Guildhall. She is now a senior lecturer in Digital Animation and Digital Arts at The London College of Music and Media, Thames Valley University.

Anthony Head worked in design and printing industry for seven years before pursuing his digital art full time, he has a First in BA Digital Art and a Distinction in MA Computer Art, awards include D&AD Student Award for E-Toy Design 2001, Peterborough Prize for Digital Art, joint prize with Jeremy Gardiner for Purbeck Light Years. A digital artist who combines creative intelligence with a strong design background, Anthony specializes in interactive 3D and immersive environments. He recently exhibited at SIGGRAPH 2004, Art Gallery Synaesthesia and has won many cans of Pepsi for a digital picture of The Haywain for Amiga Format Magazine! Anthony is currently course leader at Bath Spa University College Design for Digital Technologies, after being a fellow Lecturer in Digital Art at Thames Valley University.Both Anthony and Carol are passionate about their roles as teachers, keen to pass on their knowledge and share ideas and information. They are equally passionate in their role as learners; digital media moves so quickly and there is always something new just around the corner.