JavaScript Hooks & Actions

JavaScript – Lifecycle Events

Before registering editor hooks, wait for the appropriate event.

Event	Description
wp3dconf/editor:before-mount	Fires before the Vue editor app is mounted. event.detail.editor exposes the editor instance. Use this to register custom Vue components.
wp3dconf/editor:ready	Fires when the editor is fully initialised. Register all editor actions and filters here.

// Register custom Vue components before the editor mounts
window.addEventListener('wp3dconf/editor:before-mount', function(event) {
  const editor = event.detail.editor;

  editor.component('MyComponent', MyComponent);
});

// Register hooks once the editor is ready
window.addEventListener('wp3dconf/editor:ready', function(event) {
  const { addAction, addFilter } = window.WP3dConf;

  addAction('wp3dconf/editor/layer-added', function({ layer }) {
    console.log('New layer added:', layer);
  }, 10);
});

JavaScript – Global API

const { addAction, addFilter, hasAction, removeAction } = window.WP3dConf;

addAction( hook, callback, priority )

Parameter	Type	Default	Description
hook	String	–	The hook name
callback	Function	–	The function to call
priority	Number	10	Lower numbers run first

addFilter( hook, callback, priority )

Same signature as addAction. The callback must return the first argument (the filtered value).

JavaScript Editor Actions

wp3dconf/editor/model-loaded

Fires after the 3D model has been loaded in the editor canvas.

Parameter	Type	Description
store	Object	The editor Pinia store
store3D	Object	The Three.js/TresJS store

wp3dconf/editor/configurator-saved

Fires after the configurator has been successfully saved.

Parameter	Type	Description
store	Object	The editor Pinia store

window.addEventListener('wp3dconf/editor:ready', function() {
  const { addAction } = window.WP3dConf;

  addAction('wp3dconf/editor/configurator-saved', function({ store }) {
    console.log('Saved. Layers:', store.layers);
  }, 10);
});

wp3dconf/editor/layer-inserted

Fires when a new layer is inserted into the layer tree (e.g. via drag-and-drop).

Parameter	Type	Description
store	Object	The editor Pinia store
layer	Object	The inserted layer
parent	Object	The parent layer or group

wp3dconf/editor/layer-added

Fires when a new layer is added via the Add button.

Parameter	Type	Description
store	Object	The editor Pinia store
layer	Object	The newly added layer

window.addEventListener('wp3dconf/editor:ready', function() {
  const { addAction } = window.WP3dConf;

  addAction('wp3dconf/editor/layer-added', function({ layer }) {
    console.log('New layer added:', layer);
  }, 10);
});

wp3dconf/editor/layer-deleted

Fires when a layer is deleted from the layer tree.

Parameter	Type	Description
store	Object	The editor Pinia store
layer	Object	The deleted layer
parent	Object	The parent layer or group

wp3dconf/editor/layer-duplicated

Fires when a layer is duplicated.

Parameter	Type	Description
store	Object	The editor Pinia store
layer	Object	The original layer
parent	Object	The parent layer or group
newLayer	Object	The newly created duplicate

wp3dconf/editor/layer-reordered

Fires after layers have been reordered in the layer tree.

Parameter	Type	Description
store	Object	The editor Pinia store

addAction('wp3dconf/editor/layer-reordered', function({ store }) {
  console.log('Reordered layers:', store.layers);
}, 10);

JavaScript Editor Filters

wp3dconf/editor/configurator-data

Filters the FormData object before it is submitted to the server on save. Use this to append additional fields.

Parameter	Type	Description
formData	FormData	The form data object being submitted
store	Object	The editor Pinia store

addFilter('wp3dconf/editor/configurator-data', function(formData, { store }) {
  formData.append('my_custom_field', 'my_value');
  return formData;
}, 10);

wp3dconf/editor/layer-classes

Filters the CSS classes applied to a layer row in the editor layer panel.

Parameter	Type	Description
classes	Array	Array of CSS class strings
store	Object	The editor Pinia store

window.addEventListener('wp3dconf/editor:ready', function() {
  const { addFilter } = window.WP3dConf;

  addFilter('wp3dconf/editor/layer-classes', function(classes, { store }) {
    classes.push('custom-class');
    return classes;
  }, 10);
});