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.


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


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


Change the field of view


Change the distance of the camera from the 3D model


Change the left-right rotation angle


Change the up-down rotation angle


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


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


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;: