Documentation
Nokia 6300 frameset - six steps per revolution
Introduction
JavaScriptObject uses a frame based approach to create the illusion of 3D objects.
In a 3D program a model is rotated by a given stepwidth around the x and the y-axis. The rotation begins with a revolution around the y-axis, then increases the rotation around the x-axis by one step and again makes a revolution around the y-axis. At each step the 3D program renders an image of the view on the model and saves it. When the revolution around the x-axis is complete one has a full frameset of the 3D model.
There are two ways to do the rotation. One would be to rotate the 3D model in the 3D world space. The other way would be to rotate the camera around the 3D model. If you want to publish a small object - like a teapot - it would be better to actually rotate the object. If you want to publish a large object - like a building - it would be better to rotate the camera around the object.
Either way you end up with StepsPerRevolution² images. That images must have a filename like 003_011.jpg where 003 is the rotation step on the x-axis and 011 is the rotation step on the y-axis. The counting of the rotation steps begins with 000.
The image on the right shows a simple mobile phone frameset with six steps per revolution. From that set the JavaScript displays one image at a time in relation to the mouse position and thereby creates the illusion of an 3D object which can be rotated.
You can see a running demo of the 3D model on the right at the SketchUp documentation: Full XY Revolution Example - Nokia 6300
Options
JavaScriptObject can be easily configured by writing options directly into the longdesc attribute of the startimage. The options must be separated by a blank to be interpreted correctly. Check the examples for running code.
XHTML<img id="example" class="javascriptobject" src="dir/005_011.jpg" longdesc="1 32 option1 option2" width="500" height="500" alt="Example" />
As JavaScriptObject is an object-oriented script you can create many instances of it on one website and customize each instance differently. The following example creates two instances. The first would request the images on load and show the 3D model. The second instance would only load after the user clicks "Load Object" and the model would rotate against the mouse movement.
XHTML<img id="Instance1" class="javascriptobject" src="dir/005_011.jpg" longdesc="31 31" width="500" height="500" alt="" />
<img id="Instance2" class="javascriptobject" src="dir/005_011.jpg" longdesc="31 31 lazy inverseX inverseY" width="500" height="500" alt="" />
| Option | Description | Example |
| lazy | Enables lazy loading of the images | Lazy Loading |
| inverseX | inverse the x-axis rotation | Inverse X-Axis |
| inverseY | inverse the y-axis rotation | Inverse X-Axis and Y-Axis |
| lock | Locks the rotation at the boundaries | Locking Examples |
Stand: 2. Januar 2010. Copyright 2006-2010 Finn Rudolph. Impressum.