Player Events

There are three events that are triggered in turn as the player loads: preloaded, loaded, and rendered.

Preloaded

Emitted when the scene and all assets necessary to render the scene have been loaded. Occurs before the 'loaded' event, and is an opportunity to modify the scene before it becomes visible.

player.on('preloaded', () => {
  console.log('preloaded');
});

Loaded

Emitted when the scene and all assets necessary to render the scene have been loaded.

player.on('loaded', () => {
  console.log('loaded');
});

Rendered

Emitted when the scene has been fully rendered.

player.on('rendered', () => {
  console.log('rendered');
});

Configuration Event

When a configuration is set, an event is emitted.

player.on('setConfiguration', e => {
   console.log(e);
})

Configuration Event Response

{
    appliedConfiguration: Object,
    arrayConfIds: Object,
    attributeFunctions: Object,
    attributeState: Object,
    attributes: Array,
    cache: Object,
    compositeNodes: Array,
    condOperator: Object,
    configuration: Object,
    e: Object,
    fixedAttributes: Array,
    index: String,
    inputAttributes: Array,
    inputs: Object,
    metadata: Object,
    metadataOperator: Object,
    name: String,
    operator: Object,
    pendingConfiguration: Object,
    player: Object,
    previousConfiguration: Object,
    propagationMapping: Object,
    queries: Array,
    rules: Array,
    scriptTimeoutDuration: Integer,
    skipClone: String,
    skipRules: Boolean,
    store: Object,
    touch: Function,
    unloadAttributeFunctions: Object,
    v: Integer
}

Interaction Events

Event
`click?: (ev: EventControllerMouseEvent) => void;`
`dblclick?: (ev: EventControllerMouseEvent) => void;`
`mousedown?: (ev: EventControllerMouseEvent) => void;`
`mouseup?: (ev: EventControllerMouseEvent) => void;`
`mouseleave?: (ev: EventControllerMouseEvent) => void;`
`hover?: (ev: EventControllerMouseEvent) => void;`
`drag?: (ev: EventControllerMouseEvent) => boolean \| DragTool;`
`scroll?: (ev: EventControllerScrollEvent) => boolean;`
`pinch?: (ev: EventControllerMouseEvent) => boolean;`
`twist?: (ev: EventControllerMouseEvent) => boolean;`
`swipe?: (ev: EventControllerMouseEvent) => boolean;`
`keydown?: (ev: EventControllerMouseEvent) => void;`
`keyup?: (ev: EventControllerMouseEvent) => void;`
`keyheld?: (ev: EventControllerMouseEvent) => void;`
`dragenter?: (ev: EventControllerMouseEvent) => void;`
`dragover?: (ev: EventControllerMouseEvent) => void;`
`dragleave?: (ev: EventControllerMouseEvent) => void;`

You can add custom tools to the player, which allow you to listen for keyboard, mouse, and touch events. For example:

player.tools.addTool({
  key: 'mouseDown',
  label: 'Mousedown/TouchStart Tool',
  active: true,
  enabled: true,
  handlers: {
    mousedown: (ev) => {
      console.log(ev);
    },
  },
});