Controlling Product Models in IFRAMEs

(this is a draft specification, not yet available, and subject to change)

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

document.getElementByID("product-frame").contentWindow.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 }}}, "*");


Comments