return to Navigation and User Interface
Hyperlinks 
in VRML work in the same way as hyperlinks on HTML web pages. Any object can
have a hyperlink attached to it. When the user rolls the mouse over a linked
object a message is displayed in the status bar and the mouse point changes.
When the user clicks on the linked object they are transported to either another
viewpoint in your world or an external website (or resource).
A HUD (Head Up Display) is a construct of a number of
VRML nodes including a ProximitySensor 
The ProximitySensor basically keeps track of where the user is and
feeds their position and rotation into the group of objects that comprise the
HUD to keep it positioned just in front of them at all times.
A HUD allows the Synthetic Environment developer to create a custom user interface that suits the world and caters to the abilities of the target audience. Many VRML plug-ins are difficult to use for people new to 3D and Synthetic Environments so a simpler interface that directly reflects what your world is all about greatly enhances usability. Once you've created your own user interface you can disable the default VRML plug-in interface altogether.
The HUD we'll be using is pre-made but it can easily be re-used for your own worlds if required.
back to top | return to Navigation and User Interface
Download and unzip the following file (using WinZip) into the relevant folder of your working directory.
camera_navigation.zip (49.6Kb)
back to top | return to Navigation and User Interface
|
|
 |
|
Import the file hud.wrl. The Outline Editor should look as shown. Now we need to create some icons to put in the HUD. |
 |
|
Select everything (Select Menu > Select All) and Hide
Create 5 Faces Apply the icon textures (icon1.png, icon2.png, icon3.png and icon4.png) and the logos.png to the respective faces. |
 |
|
Ensure subselection is turned on
|
 |
|
Drill-down into each of the icons, select the Material node Note: Deleting the Material node means the icons will be unaffected by the lights in our scene. We want the icons to look bright (unshaded) at all times. |
 |
|
Select icon 1 and create a Hyperlink In Hyperlink Properties choose This File and select vp1 from the Viewpoint drop-down box. This creates a clickable link to the Entry Viewpoint that we set up in the previous exercise. Type Entry Viewpoint in the Description in Browser text box. This message is displayed in the status bar of the web browser. Repeat this process for icons 2 - 4.
|
 |
|
For the Sony logo create a Hyperlink This creates a link to the external Sony website. You must specify a full URL (ie. with the http:// in front etc). Note: In the Optional Parameters text box we have put the standard HTML tag of target="_blank". This ensures that the Sony website opens in a new web browser window. If we don't do this then it will open in the same window, replacing our Synthetic Environment. |
 |
|
Group The HUD is now complete. |
 |
Save your work. |
|
Preview in Cosmo Player. |
back to top | return to Navigation and User Interface
Launch
Cosmo Worlds and Open 
the file camera_navigation.wrl
it. Switch to the Front View 
+ F and turn on the Grid 
,
name and position them roughly as shown. You will have to Zoom
in 
as the faces will be quite small - do not scale them up!
right-mouse-button
and
Delete it. The word Material will be replaced by <Null
Node>.
all the icons together and drag the entire group up the scene graph until
it is under the HudObjects field as shown.