HOW TO ADD MARKERS TO A HYPERCOSM APPLET
Hypercosm applets that have been created by model exporting software such as Hypercosm Teleporter automatically include script code to respond to Hypercosm's Javascript MarkUp API. As a result, any model that has been exported using these tools can have markers added to it easily simply by adding some Javascript to its associated web page.
Add Javascript "include" files
The first step is to include a set of Javascript resource files that contain the Javascript code that defines the MarkUp API. Normally, when you export a model from Hypercosm Teleporter, these "include" files are automatically added to the web page for you and so you don't need to worry about this and can skip ahead to the next step. If you are creating the HTML page from scratch or you just would like to know what files are involved, the neccessary files are listed below:
<script src="scripts/utilities/javascript_utils.js"></script> <script src="scripts/utilities/web_browser_utils.js"></script> <script src="scripts/utilities/string_utils.js"></script> <script src="scripts/utilities/browsersniffer.js"></script> <script src="scripts/utilities/hc_checkforplayer.js"></script> <script src="scripts/utilities/rgb_color.js"></script> <script src="scripts/utilities/common_colors.js"></script> <script src="scripts/utilities/hc_vector3.js"></script> <script src="scripts/overlays/hc_overlay.js"></script> <script src="scripts/overlays/hc_colored_overlay.js"></script> <script src="scripts/overlays/hc_marker.js"></script> <script src="scripts/overlays/hc_icon.js"></script> <script src="scripts/components/component.js"></script> <script src="scripts/applet/hc_applet.js"></script> <script src="scripts/applet/hc_scriptable_applet.js"></script> <script src="scripts/applet/hc_markup_applet.js"></script> |
Create new marker
The next task that needs to be done is to create a new marker. Creating and placing markers must be done after the applet has finished loading. Therefore, your Javascript to add markers should be placed or called from the applet's "onLoad" function. To create a marker, you need to know the X, Y, and Z coordinates of the place in the 3 dimensional scene where you want the marker to go. These coordinates can be found either in your 3D authoring tool (SketchUp, 3ds Max etc.) or in some cases from the exported applet. If the applet has been exported with MarkUp tools as part of the user interface (as in the standard SketchUp applet UI), then you can use this tool to find the XYZ coordinates. Once you have the XYZ coordinates, you convert them into a "vector" using the HCVector3 constructor as shown below and then pass the vector into the HCMarker constructor to create a new marker.
applet.onload = function() {
// create new markers
//
var marker1 = new HCMarker(new HCVector3(-10, -10, 20));
var marker2 = new HCMarker(new HCVector3(10, -10, 20));
var marker3 = new HCMarker(new HCVector3(-10, 10, 20));
var marker4 = new HCMarker(new HCVector3(10, 10, 20));
}
|
Add marker to scene
Once you've created a new marker, the next step is to add it to the scene. This is done using the applet's "addOverlay" method. As you will see later, there are different types of overlays besides markers such as lines or custom icons that may also be added using this method.
applet.onload = function() {
// create new markers
//
var marker1 = new HCMarker(new HCVector3(-10, -10, 20));
var marker2 = new HCMarker(new HCVector3(10, -10, 20));
var marker3 = new HCMarker(new HCVector3(-10, 10, 20));
var marker4 = new HCMarker(new HCVector3(10, 10, 20));
// add markers to applet
//
applet.addOverlay(marker1);
applet.addOverlay(marker2);
applet.addOverlay(marker3);
applet.addOverlay(marker4);
}
|