With the adoption of HTML5, the web is becoming 3D enabled as standard. The dawn of universal fully interactive 3D graphics, virtual environments and games without plug-ins isn’t that far away from a mainstream reality. But as a web designer comfortable with 2D tools, that third dimension might seem a little daunting. This is a simple tutorial to introduce you to the notion of working in three dimensions – and what subject matter could be more fitting than the open-source HTML5 logo itself?
Here we use Google SketchUp to create a simple but effective web-ready 3D asset. SketchUp excels at creating such models because it encourages you to model from a 2D image as a starting point. This eases you from a 2D mindset into 3D without the hassle of learning a whole new way of thinking. So the first step, if you don’t already have it, is to download SketchUp!
Opening up Pandora’s box with third-party plug-ins
SketchUp initially came with just two or three tools, and the reason it gained such rapid popularity was largely because of that simplicity. To stay true to that unique selling point, SketchUp still ships bare bones compared to other software, but importantly you can use plug-ins to provide pretty much whatever extras you need.
Plug-ins come in ZIP files and are usually found on forums or third-party sites – for example, Sketchucation.com. Once you have the ZIP, extract it to your plug-ins folder. When you restart SketchUp there should be an extra toolbar or menu items in the Ctrl/right-click (context-sensitive) menu or Tools menu. Some tools need to be enabled in Window>Preferences>Extensions.
01 Setting up SketchUp
After you have installed Google SketchUp, fire it up and select Choose Template from the welcome screen. Now select the Product Design & Woodworking – Millimeters template, as shown above, and click Start using SketchUp. To fetch the image you’ll be working from, navigate to w3.org and download the open-source HTML5 logo, saving it into a convenient folder to grab in the next step.
02 Import an image
You now need to import the 2D logo image into SketchUp as a reference to work from. Go to File>Import and select the folder where you just saved the HTML5 image. Select All Supported Image Types from the drop-down menu and make sure that the Use as Image radio button is checked before opening it.
03 Placing and sizing the image
Your image appears in the 3D viewport. Move your cursor to the Origin and left-click to fix the bottom-left of the image in that location. Move the cursor to the right and watch the image stretch in size. The width of the image is shown in the bottom-right of your window; type in 500 and hit Enter.
04 Using preset views
Go to View>Toolbars>Views. Now drag the Views toolbar to dock it where you want – either at the top or to one side of the window. Click on the Top view button, then click the Zoom Extents option. You now have the whole image filling the screen, viewing it head on.
05 Draw a rectangle
Select the Rectangle tool and click first on the top-left of the HTML5 shield; you should see the tooltip On Face in Image. Now move the cursor to the bottom-right until you see the tooltip On Edge in Image. Move to the right until you have the shield fully enclosed and then click to create the rectangle.
06 Extrude into 3D
Hold the middle mouse button and move the mouse to orbit the view so that you’re looking at the rectangle end-on. Use Pan or Zoom Extents to frame the view. Select Push/Pull and click on the shape. Move the mouse upwards to extrude the rectangle into a box – around 30 millimetres should do it.
07 Draw cut lines
Select the Pencil tool and move the cursor over the top edge of the box. When you get near the middle, the tooltip should show Midpoint. Click there, and then click at the centre of the left side edge as indicated above. Click on the first point again and draw a line to the centre of the right-hand edge.
08 Create the bevel
Select the Push/Pull tool and click on the top-left section of the face that you just created. Push the face all the way to the back of the box and click; the Push/Pull-ed face should disappear. Repeat this process for the right-hand side. Once done, the top face of the shield should be bevelled, as it is in the image above.
09 Construct the 3D text
Go back to the Top view and use the Pencil tool to trace the edge of the ‘H’. Make sure that the tooltip always shows On Face in Image or On Edge in Image. Use Push/Pull to extrude the letter. Repeat this for the other characters, but instead of extruding, just double-click on the face with the Push/Pull tool.
10 Creating components
Press the Spacebar to deselect all tools, then triple-click on the shield. Ctrl/right-click and select Make Component. Type in ‘HTML5_shield’ into the Name field, ensure the ‘Replace selection with component’ box is ticked and hit Create. Now repeat with the text, but this time hold Shift to allow you to select multiple letters at once; name this component ‘HTML5_text’.
11 High five!
Orbit the view until you can see under the shield. Trace the outline of the shape starting at the corners, then go to Window>Outliner and select the HTML5_shield component. Ctrl/right-click and select Hide before going to the Top view. Trace over the white ‘5’ as you have done before and Push/Pull it a long way up.
12 Cookie cutter
Ctrl/right-click the image and select Delete. Now rotate the view and Push/Pull the bottom face of the ‘5’ up a tiny bit. Now draw a single line to finish off the shield shape as shown. Unhide the HTML5_shield component using the Outliner. Lastly Push/Pull the upper face of the ‘5’ so that it is just clear of the shield.
13 Intersect two volumes
Triple-click the ‘5’, Ctrl/right-click and select Intersect Faces>With Model. Now Push/Pull the shield shape up and clear of the ‘5’. Orbit the view and Push/Pull the bottom face of the shield shape down. Double-click the HTML5_shield component to edit it. Triple-click and go to Intersect Faces>With Model.
14 Erase excess geometry
Ctrl/right-click the HTML5_shield component and select Explode; this makes the HTML5_shield geometry stick to the shield shape and the ‘5’ that you created. Select the Eraser tool and rub away the bottom-left and bottom-right parts of the shield that you don’t need. Make sure all lines and faces are removed.
15 The intersected form
Erase the upper and lower parts of the shield that you don’t need; this leaves just the intersected form of the HTML5_shield component and the shield shape extrusion – or, in other words, the finished shield. Now select the underside of the shape and hit the Delete key (or Backspace if using a Mac).
16 Clear internal geometry
Orbit to the underside of the shield and you will see that part of the ‘5’ is still left within the interior of the shield. This excess geometry will make your file size larger than it needs to be so should be removed. Use the Eraser on this until you only have the indentation of the number in the shield.
17 Download some SketchUp extensions
Use the Pencil tool to draw a line along one edge of the underside of the shield; this will reinstate the back face. Download the latest versions of RoundCorner (RoundCorner 2.3a at the time of writing) and Libfredo (Libfredo6 4.3b) and extract them into your Google SketchUp plug-ins folder.
18 Select sharp edges
Save your file and restart SketchUp; now you will see an additional toolbar. Hit the Sharp Corners button, click in the menu bar under Offset and a dialog box opens. Enter 12mm in the Offset box and 3 in the Number of segments box, then press OK. Now select the six outer edges of the shield’s upper face.
19 In the round
Move the cursor into a blank area of the screen and you will see a green tick – left-click this to confirm and the corners are now rounded off. Click on the top face of the ‘5’. Reduce the Offset to 2mm, hit OK and click to confirm. Repeat this step with each of the letters.
20 A splash of colour
Select the Paint Bucket tool and open the Colors folder in the Materials palette. Sticking with the original scheme, find an orange colour and apply it to the shield. Select white to paint the ‘5’ and a grey/black colour for the ‘HTML’. Go to Edit>Select All then use the Move tool to shift the tip of the shield to the Origin point.
21 Take it further
Go to File>Export>3D Model, select COLLADA file, then Export. You can now use SceneJS with the COLLADA importer to serve the model in WebGL-enabled browsers. For more on creating 3D models for web/games, see this book: Google SketchUp for Game Design.