API 360 Javascript Viewer

Installing the viewer

If you are not so comfortable with javascript please use the loader. This part covers only the real 360 engine. Animation, events, reading properties and starting. U can use these events to create interaction with the user, add other functions (like zoom functions) preloaders and more.

Installing the viewer is easy . Non technical people can use the standard code while webprofessionals can play with events and animations for creating stunning presentations.

Load the script

Call the javascript file. For demo use you can grab the one from us or if you bought a license you can use the one from own domain.

<script type="text/javascript" src="http://360-javascriptviewer.appspot.com/latest/js/3dweb.latest.js"></script>

Prepare the presentation

create a new instance from the Create3D class, you can make as much as you want. All presentation specific parameters are stored here. Now all the necessary javascripts are loaded

<script type="text/javascript">
var x = new Create3D();
//Give the created instance the parameters for the presentation.</p>
 x.startValues({
 totalFrames: 72,//amount of pictures
 imageUrl: 'http://360-javascriptviewer.appspot.com/images/ipod/ipod_[#frame].jpg', //url to images where [#frame] is a value like 01,10,22
 imageBigUrl: 'http://360-javascriptviewer.appspot.com/images/ipod/big/ipod_[#frame].jpg', //url to images where [#frame] is a value like 01,10,22
 info: true,//shows de console with notifications and errors
 tag: 'product_image_x', //The id of the image wich will replaced by the 360 image
 pictureDirection: false, // true for right false for left
 rotationSpeed: 8.3, //1 is slow, 10 is fast
 rotationEnding: 6,//slowing down after rotation
 license:'', //put here your licensecode and the 360 logo is gone
 clickCallback: 'zoomOption()'//the function if someone is clicking on the presentation
 });
</script>

The html part

You need an image with an id. In most cases this is the productimage but of course you can use others or a 1×1 pixel. In this example we use the one from the presentation. Remember you only an image with an id, nothing more.

<div id="image_holder_x">
		<img src="http://360-javascriptviewer.appspot.com/images/ipod/ipod.jpg" id="product_image_x" /></div>
</div>

Start the presentation

You can start the presentation automatic when a user opens your page or you can start it when your visitor presses a button. When your visitor want to see the product in 360 make sure you have presentation fully loaded in the background. You can do this with the silentloader. Use a custom event for knowing when it’s ready (display the button)

 x.silentLoader()

If you use the silentloader or not this is the way to start the animation. If you do this directly after opening the page use the setTimeout function for 2 seconds. Otherwise IE is giving troubles.

x.start();

or with a timeout

setTimeout("x.start()", 2000);

Listen to your presentation

Create listeners with callback functions for integrating the presentation in your page. After loading, at the end of an animation , while loading the presentation or just to know where your visitor looks at and what he is doing.

x.customEvents.addListener("build", functionAfterBuild);
x.customEvents.addListener("done", functionAfterAnimation);
x.customEvents.addListener("preload", functionDuringPreload);
x.customEvents.addListener("drag", functionDuringDrag);
x.customEvents.addListener("loaded", functionAfterPreload);

Get or set values

If your user wants to change the rotationspeed or other parameters from the presentation you can set this following function

x.setValue("rotationSpeed", newValue); //or
x.setValue("rotationEnding", newValue);

or use the get function

var currentRotationSpeed = x.getValue('rotationSpeed');
var currentRotationEnding = x.getValue('rotationEnding');
var totalFrames = x.getValue('totalFrames');
var currentFrame = x.getValue('frameNo'); //now you know where your visitor is looking at
var howManyFramesAreLoaded = x.getValue('loaded');

How to use Events & getValue

Lets’s say your visitor is on your site and suddenly a button appears to watch the product in 360 degrees. When the user is on your site the images necessary for the presentation is loaded on the background. This is started of course only when the page is fully loaded.

 x.silentLoader()

But we want to know when the silentLoader is finished loading so we can display our button.

 
x.customEvents.addListener("loaded", showImage);

Now we need the function ‘showImage’ to activate the button.

 
 function showImage(){
document.getElementById("btn_loaded").style.visibility = "visible";
}

And of course we need the button image with the id ‘btn_loaded’ on our page. With this button we start the presentation. We do that by giving the instance x the method start();

 
<a href="javascript:x.start()"><img src="http://www.3dweb.nl/create3d/images/icon_rotate_51x56.png"
	 id="btn_loaded" style="visibility:hidden;"  /></a>

Animations

Start animations, navigate to frames (shortest way) or create loops with the use of custom events. If the user wants to drag the presentation the animation stops. There are quite a lot parameters and the best way to find yours is using the example presentation.

x.startAnimation(speed, degrees, 'none', a, b, c, 0)

speed: how many ms does the animation takes degrees: what is the angle, 0 for animation to frame ‘none’ : type of animation (soon there will be more) a,b,c: parameters for the animation 0: The number of the frame where the animation ends. 0 for degree input.