Controlling Product Models in IFRAMEs

Product models being displayed in IFRAMEs can be controlled via messages. The general form looks like this:

document.getElementByID("product-frame").postMessage({ kaon: message}, "*");

The message is an object, with attributes specifying commands to carry out.

reset:

Set to any truthy value to stop any playing script and reset to the initial view

view:

Object indicating that the view should be changed. The specific change depends on the attributes of this object:

fov:

Change the field of view

dist:

Change the distance of the camera from the 3D model

theta:

Change the left-right rotation angle

phi:

Change the up-down rotation angle

snap:

Set to any truthy value to snap the camera to the new settings (default is smooth changes)

script:

Pass a string with the identifier of the animation script to play

Examples:

Reset the model:

document.getElementById("product-frame").contentWindow.postMessage({ kaon: {reset : true}}, "*");

Turn the model to 45 degrees yaw, and 0 degrees pitch:

document.getElementById("product-frame").contentWindow.postMessage({ kaon: { view : { theta: 45, phi: 0 }}}, "*");

When using this API, you may want to embed the model with no built-in user interface elements at all. You can do this by adding ;noui; to the HREF setting up the IFRAME, so it reads something like: ...product.html#model;noui;: