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").postMessage({ kaon: {reset : true}}, "*");

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

document.getElementByID("product-frame").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;:


Comments