/w=32,quality=90,fit=scale-down){kind=logo}
Getting started
System Requirements
Rendering
Vectary Dashboard
Account Settings
Roles
User Interface
Scene Orientation
How To Get HelpImporting
/w=3840,quality=90,fit=scale-down)
Import formats
Figma frames import /w=3840,quality=90,fit=scale-down)
CAD filesDesign process
Design mode
Materials and Textures
Animated Materials/w=3840,quality=90,fit=scale-down)
Decals
UV mapping
Camera
Lighting and Environment
Effects
Background
Ground plane
Control Bar/w=3840,quality=90,fit=scale-down)
Libraries
Edit mode3D Configurator
Floating UI
Hotspots/w=3840,quality=90,fit=scale-down)
Interactions/w=3840,quality=90,fit=scale-down)
Animations
VariantsScene and project settings
Version History/w=3840,quality=90,fit=scale-down)
Augmented Reality (WebAR)
WebXR (beta)
Loading screen
Mouse controls
Interaction prompt
Menu - SettingsSharing, exporting, embedding
Sharing/w=3840,quality=90,fit=scale-down)
Performance analyzer
Optimizing a shared project/w=3840,quality=90,fit=scale-down)
Project cloning
Embedding to other software
Export optionsOther
Figma Plugin - Vectary 3D Studio Lite
2D to 3D
Adding comments
Object Editing
Left bar 
ShortcutsModel API
/w=3840,quality=90,fit=scale-down)
Introduction/w=3840,quality=90,fit=scale-down)
Quick Start
Events & Listeners/w=3840,quality=90,fit=scale-down)
Floating UI Configurators/w=3840,quality=90,fit=scale-down)
EcommerceEvents & Listeners
You can send data to the model, and also listen to events dispatched from the model.
Api Events
enum ApiEvents
INTERACTION_CUSTOM_EVENT = "{custom_event_name}",
MOUSE_MOVE = "mouse_move",
MOUSE_DRAG = 'mouse_drag',
MOUSE_DOWN = "mouse_down",
MOUSE_UP = 'mouse_up',
MOUSE_CLICK = "mouse_click",
MOUSE_WHEEL = 'mouse_wheel',
KEY_DOWN = 'key_down',
HOVERED_OBJECT = 'hovered_object',
CONFIGURATOR_STATE_CHANGE = "configurator_state_change",
SELECTION_STATE_CHANGE = "configurator_state_change",
}Event Responses
{custom_event_name}
Custom events need to be setup directly in studio.
return string | number | boolean | voidconfigurator_state_change
return ConfigurationState[]Adding/Removing Event Listeners
addEventListener
You can subscribe to any of the ApiEvents, by adding a callback function that will execute whenever the subscribed event triggers.
addEventListener(
eventName: ApiEvents,
callback: (result: EventResponses) => void
): Promise<void>Parameters
Description
eventName
Name of the event that the method will subscribe to.
callback
(result: EventResponses) => void
Callback function which takes as parameter the result of the event you are subscribing to.
Usage:
modelApi.addEventListener(
"configurator_state_change",
(res) => {
// Your code here
}
);removeEventListener
You can unsubscribe to any of the ApiEvents you may have subscribed previously. If a previous callback function used when adding the event listener is sent, it will disconnect that specific event, otherwise it disconnects all listeners created with eventName
removeEventListener(
eventName: ApiEvents,
callback?: (result: EventResponses) => void
): Promise<void>Parameters
Description
eventName
Name of the event listener the method will remove.
callback (optional)
(result: EventResponses) => void
Callback function which specifies the event you are unsubscribing to. If not used unsubscribes all listeners created with eventName
Usage:
modelApi.removeEventListener(
"configurator_state_change"
);Example
Dispatching Custom Events
dispatchEvent
You can send Interaction’s Custom Events with a value (or without → void) to the Model to trigger interactions and affect their conditions.
dispatchEvent (
eventName: string
value?: number | string | boolean | void
): Promise<void>Parameters
Description
eventName
Custom event name matching one of the Interaction Events created in the model.
value (optional)
number | string | boolean | void
Value you want to send along. It needs to match the type set in the Interaction Event. In case of void this parameter is ommited.
Usage:
await modelApi.dispatchEvent("temperature", 26);