Events emitted by Threekit

Player Events

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


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', () => {


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

player.on('loaded', () => {


Emitted when the scene has been fully rendered.

player.on('rendered', () => {

Configuration Event

When a configuration is set, an event is emitted.

player.on('setConfiguration', 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

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:

  key: 'mouseDown',
  label: 'Mousedown/TouchStart Tool',
  active: true,
  enabled: true,
  handlers: {
    mousedown: (ev) => {