Pro/DESKTOP® Tutorial Publishing 3D Models on the Web Written by Tim Brotherhood Copyright © 2003, Parametric Technology Corporation (PTC) All rights reserved under copyright laws of the United States and other countries Conditions of use Copying and use of these materials is authorized only in the schools of teachers who attend official training with a PTC certified trainer PTC, the PTC Logo, The Product Development Company, Create Collaborate Control, Simple Powerful Connected, Pro/ENGINEER, Pro/DESKTOP, Wildfire, Windchill, and all PTC product names and logos are trademarks or registered trademarks of PTC and/or its subsidiaries in the United States and in other countries All other product names and marks referenced herein are trademarks or registered trademarks of their respective holders All other use is prohibited unless written permission is obtained from the copyright holder Acknowledgements Sheila Schencke, Executive Director, STARBASE Louisiana Barbara Koscak, Executive Director, STARBASE Michigan Rick Simms, Deputy Director, STARBASE Michigan Feedback In order to ensure these materials are of the highest quality, users are asked to report errors to PTC at schools@ptc.com Suggestions for improvements and other activities would also be very welcome 3D on the Web T ABLE OF CONTENTS FILES FOR 3D ON THE W EB INTRODUCTION What is VRML? Definition VIEWING VRML MODELS Opening a VRML model Walking around the model Exporting models from Pro/DESKTOP Viewing a VRML model directly INSERTING YOUR VRML MODEL INTO A W EB PAGE 10 Creating a hyperlink 11 Converting a word document to a web page 12 Viewing your VRML model from a web page 13 OTHER VRML FEATURES 16 Installing viewers at home 16 3D on the Web FILES FOR 3D ON THE WEB The following files will be needed to successfully complete this project: File Name Rocket.wrl Shuttle.wrl Web page template.doc 3D on the Web I NTRODUCTION What is VRML? You may have been on web sites where you can take a virtual tour of a building or played adventure games that involve finding your way around 'worlds' For example, this is a recreated Roman town called Wroxeter near to modern day Shrewsbury in England You could take a virtual tour of a 3D model of this town A VRML model of a simple steam engine like the ones sold as children's toys These models are in the same format you will use to publish your designs Definition VRML stands for Virtual Reality Modeling Language It is the equivalent of a foreign language for computers This language has a vocabulary and grammar that describes how 3D objects should be created and displayed on web pages The complexity is hidden from the user who 'sees' the 3D object on screen and can rotate and zoom the view and 'navigate' around the object, sometimes called a fly through Free viewer software needs to be installed in your browser before you can view VRML models This has been done for you on the computers you will be using At the end of this tutorial are instructions how to get one for your computer at home 3D on the Web VIEWING VRML MODELS To show you how the system works, we will show you how to open the VRML model of a rocket directly in your web browser Opening a VRML model • Start the web browser on your computer • Open the File pull-down menu • Click on Open… • Locate the folder with the STARBASE sample files • Select the file named Rocket.wrl • Click on The model will open in your web browser Extra tool bars along the left and bottom edges of the window enable you to control the way you view and move around the model 3D on the Web Walking around the model The Walk button looks like the button , will be active by default You can tell this because the screen cursor • Click and drag in the view window and the model will move and/or change size • Experiment how moving the mouse changes the view of the rocket • Try some of the other buttons In the following grid we have shown the button, the screen cursor and an explanation Walk or fly through Look around up/down Turn (your head?) Rotate the model Targets a position Revolve the model The Restore button of the ones below can 'rescue' a model that has disappeared! Zooms out to see the entire model Looks straight on to the model Not used in Pro/DESKTOP Return to the default view You are now ready to explore a few web sites with VRML models or 'worlds' before creating models of your own Viewing web sites with VRML models on them Here is a really cool site with loads of VRML models and worlds and links to lots of other 3D sites http://www.web3d.org/vrml/oblib.htm A search for VRML will produce lots of links to other 3D sites Are you ready to create a 3D VRML model of your shuttle? 3D on the Web Exporting models from Pro/DESKTOP Being able to view the work of others in 3D is clever but publishing your own work in this way can be is fascinating Here's how • Your shuttle model should be open on screen in Pro/DESKTOP • Open the File pull-down menu • Select Export • Choose the option for VRML… • Locate the folder where you want to save the file • Enter a name for your model • Click on The file saved will have a wrl extension That's all there is to creating the file Now for the exciting part, viewing the model Viewing a VRML model directly • Start your browser • Open the File pull-down menu • Select Open • Locate the file Shuttle.wrl • Select the file • Click on 3D on the Web Your shuttle model will be visible in the browser window Remember how to use the tools around the edge of the window to navigate around your model? • Try it now 3D on the Web I NSERTING Y OUR VRML MODEL INTO A W EB P AGE For simplicity you will modify an existing web page in Word before saving it as an HTML file • Open the file Web page template.doc Each row (horizontal) in the table has information on a single model The second row is partly complete for your shuttle model Text in the left hand column names the model and acts as a hyperlink to open the VRML model Smaller text in the left column will tell viewers of the page how large the file is This helps them decide whether they want to wait for some of the larger files to download Even more helpful would be the average time for downloading at different modem speeds Small pictures (thumbnails) of the models are inserted into the right hand column to give the viewer a clearer idea of what the model looks like This could be a JPEG format image exported from the album 3D on the Web 10 Creating a hyperlink Hyperlinks are areas of a web page that are sensitive to mouse clicks They usually open another web page In ours they will open a 3D model There are a number of different types of hyperlink You will be shown how to create two types Text Hyperlink • Highlight the text Shuttle • Select the Hyperlink button on the toolbar The Insert Hyperlink dialog window opens • Click on the button • Locate the folder where your shuttle model was saved • Select your model • Click on 3D on the Web 11 You will return to the Insert Hyperlink dialog window The path to the your model appears in the top field The Use relative path for hyperlink option should be checked • Save the modified page This has created a hyperlink from the text to your model Viewers of the page will now be able to click on the text to open your model Before we try that, the next section shows you how to create a hyperlink from the shuttle picture Image Hyperlink • Click on the image of the shuttle to highlight it • Select the Hyperlink button on the toolbar • Follow the same steps used previously for the text hyperlink • Save your modified page Converting a word document to a web page • Open the File pull-down menu • Select Save As HTML… • Locate the folder you want to save the web page in • Give the page a name 3D on the Web 12 • Click on Viewing your VRML model from a web page • Open your web browser • Open the File pull-down menu • Click on Open… • Click on the • Locate the folder where your shuttle model was saved • Select your model • Click on 3D on the Web button 13 Your web page will open in the web browser • Move the cursor over the shuttle text or picture The cursor will change to the familiar hand to show there is a hyperlink • Click on the shuttle text or picture 3D on the Web 14 Your model will open in the browser with the navigation buttons around the edge • Use the buttons and the mouse to explore your shuttle 3D on the Web 15 OTHER VRML FEATURES The VRML browser has a number of settings that can be altered • Click with the right mouse button on a blank area of the model window • A floating menu appears on screen These determine how the model appears and how you navigate Experiment with the following options Viewpoints are not functional in Pro/DESKTOP models Graphics controls lighting and appearance of models Speed can be changed to suit the speed of your computer Movement repeats the tools on screen for navigating Toggles the navigation bar on/off Help menus and tutorials Further options Tip: Don't make too many changes at once Installing viewers at home If you want to this type of thing at home a number of companies produce the free viewers They are also available for most popular web browsers including Netscape and Internet Explorer Try doing an Internet search to find the best viewer for you 3D on the Web 16