/w=32,quality=90,fit=scale-down){kind=logo}
Getting started
Vectary Dashboard
Account Settings
Roles
How To Get Help/w=3840,quality=90,fit=scale-down)
Library
Scene Orientation
Shortcuts
System RequirementsStudio Navigation
User Interface
Design mode
Edit mode
Left bar - Project & Workspaces 
Right bar - Properties panel
Canvas tools
Control BarDesign process
Camera/w=3840,quality=90,fit=scale-down)
File Importing/w=3840,quality=90,fit=scale-down)
NURBS (CAD)
Object Editing
Colors and Materials
Lighting and Environments
Version History
Animated Materials/w=3840,quality=90,fit=scale-down)
Interactions/w=3840,quality=90,fit=scale-down)
Animations
Floating UI
Variants
Hotspot/w=3840,quality=90,fit=scale-down)
Decals
UV mapping
2D to 3D
Figma frames import 
Figma Plugin - Vectary 3D Studio Lite
Rendering
Adding commentsSharing and embedding
Sharing your projects
File Exporting/w=3840,quality=90,fit=scale-down)
Clone projects (Sharing Settings)/w=3840,quality=90,fit=scale-down)
Augmented Reality (WebAR)
WebXR (beta)
Embedding to other software
Optimizing a Shared project
Loading screen/w=3840,quality=90,fit=scale-down)
Scene performance analyzerModel 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);