Finn Rudolph

Installation


Step 1 - Preparation

Download the latest JavaScriptObject version, unpack it and upload the files javascriptobject.js, javascriptobject.css, bg_lazy_hover.png and bg_lazy_link.png to your server. To use JavaScriptObject on your website you need to add the following two lines inside the header of your XHTML page:

XHTML<link rel="stylesheet" href="javascriptobject.css" type="text/css" />
<script src="javascriptobject.js" type="text/javascript"></script>

If you care about filesize upload and use the javascriptobject.packed.js and javascriptobject.packed.css instead.


Step 2 - Rendering

To export a 3D model for JavaScriptObject you need to render a set of frames from the model. Each frame has to cover a different view angle on the model. Generating the frames can be automatically done with the following 3D programs*:

Upload the rendered images to a directory on your server.


Step 3 - Implementation

You then just need to insert the following XHTML in the body of your site:

XHTML<img id="unique" class="javascriptobject" src="dir/000_000.jpg" longdesc="rows cols options" width="w" height="h" alt="text" />

Replace unique by a unique name. Make sure, that the class name is always javascriptobject. Replace dir/000_000.jpg by a link to any image from your frameset. Please note that JavaScriptObject will use that image as the first frame.

Replace rows by the number of images per revolution around the x-axis. Replace cols by the number of images per revolution around the y-axis. For an object that can be rotated around both axes rows and cols are always the same. If you want the 3D model only to spin 360° around the y-axis rows should be set to 1. options are optional, please check the documentation for a list of possible options.

The image width and height parameters (w and h) must be set to the width and height of the frame image in pixels. Finally replace text with a nice description of the startframe to increase the accessibility of your content.

Since JavaScriptObject is object-oriented you can place many 3D models on one page by repeating step 2 and 3. Just make sure that the id names are different.

* There will be more instructions on how to export frames with other 3D programs soon. If you can't wait the documentation and the existing scripts should show you how to automate the 3D program of your choice.