Animation

Upon launching the 3D preview, the model is animated with a wiggle effect. Simultaneously, an interaction prompt is displayed, moving from left to right to indicate interactivity.

Interactivity

When the 3D model is interacted with (rotated, panned, or zoomed), the animation stops and the interactivity prompt disappears.

You can disable interactivity, preventing the interactivity prompt from appearing:

const shopAR = ShopAR.plugin.setup({
  ...
  interactive: false,
  ...
});

You can also toggle interactivity on the fly:

shopAR.setInteractive(!shopAR.isInteractive());

Custom animation

It is possible to overwrite the wiggle animation by specifying initialAnimation as a plain-text table of key frames:

ShopAR.plugin.setup({
  ...
  initialAnimation: `
    # Empty lines and comments are ignored.
    # First line defines the columns and all subsequent lines define data per key frame.

    time  pitch  yaw     fov    interpolation
    0s    45deg  60deg   16deg  hold
    1s    45deg  60deg   16deg  ease-in-out
    2s    60deg  -60deg  13deg  hold
    3s    60deg  -60deg  13deg  ease-in-out
    4s    90deg  90deg   26deg  hold
    5s    90deg  90deg   26deg  ease-in-out
    6s    45deg  420deg  16deg  hold
  `,
  ...
});

Supported columns are:

• time: timestamp of the key frame.
• pitch: vertical angle of rotation.
• yaw: horizontal angle of rotation.
• fov: camera's field of view.
• interpolation: easing function used for interpolating the values between this and the next key frame.

note

Timestamps are specified with or without a unit (ms or s). When not specified, milliseconds are used. Angles are specified with or without a unit (deg or rad). When not specified, degrees are used.

Supported interpolation functions:

• hold: maintain the current value without interpolation.
• linear: linear interpolation.
• sine: sine wave interpolation.
• ease: starts slowly, accelerates sharply and slows gradually towards the end.
• ease-in: starts slowly, progressively speeds up until the end, at which point it stops abruptly.
• ease-out: starts abruptly and progressively slows down towards the end.
• ease-in-out: smooth start and end with gradual acceleration and decceleration.
• cubic-bezier(x1, y1, x2, y2): custom Bézier curve defined by two 2D points.

info

Alternatively, you can specify the animation as a KeyFrameConfig object array. This might be more suitable for dynamic configuration (e.g. when generating the animation at runtime based on some parameters):

ShopAR.plugin.setup({
  ...
  initialAnimation: [
    { time: 0,    pitch: 45, yaw: 60,  fov: 16, interpolation: 'hold' },
    { time: 1000, pitch: 45, yaw: 60,  fov: 16, interpolation: 'ease-in-out' },
    { time: 2000, pitch: 60, yaw: -60, fov: 13, interpolation: 'hold' },
    { time: 3000, pitch: 60, yaw: -60, fov: 13, interpolation: 'ease-in-out' },
    { time: 4000, pitch: 90, yaw: 90,  fov: 26, interpolation: 'hold' },
    { time: 5000, pitch: 90, yaw: 90,  fov: 26, interpolation: 'ease-in-out' },
    { time: 6000, pitch: 45, yaw: 420, fov: 16, interpolation: 'hold' },
  ],
  ...
});