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

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.

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

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

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.

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

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.

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.

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.

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.

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.

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

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.