/w=32,quality=90,fit=scale-down){kind=logo}
/w=256,quality=90,fit=scale-down)
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
Introduction
Events allow you to communicate what is happening in your project when it is interacted with.
Events are configured in interactions (Interact mode) and can be added to triggers, conditions and actions:
- When used in
triggersandconditions, they work aslisteners - When used in
actionsthey work asdispatchers
Not only can you use events within the project, but you can also do so outside the project, enabling cross-communication with your website by using our Model API:
- Send information to triggers and conditions in your project by dispatching events.
- Listen from actions in your project by subscribing to events.
This way, you can send any information to the model embedded on the site, and also listen and react to things happening in the model from your site.
Events have a name, and an extra value can be associated to them, depending on their type:
Void— no extra data is sentString— text valueNumber— number value (whole number, decimal)Boolean— true/false value
Here is an example of an interaction where clicking a button in a 3D scene triggers the sending of a Boolean event with a value of True:
Events as Triggers
Events can be used/added in triggers. If an event with the same name is dispatched (either from an action or from the Model API) it will activate the trigger on its interaction.
Events as Conditions
Events can be used/added in conditions. If an event with the same name has ever been dispatched, the latest value entry is used when the condition is evaluated.
Void
- Happened —
event_namewas previously dispatched at least once - Didn’t happen —
event_namewas never dispatched
String
The last entry from event_name is:
- Value = {text} — equal to the expected text
- Value ≠ {text} — not equal to the expected text
Number
The last entry from event_name is:
- Value = {number} — equal to the expected number
- Value ≠ {number} — not equal to the expected number
- Value ≤ {number} — less than or equal to the expected number
- Value < {number} — less than the expected number
- Value ≥ {number} — greater than or equal to expected number
- Value > {number} — greater than the expected number
Boolean
The last entry from event_name is:
- Value = True or False — equal to the expected value.
- Value ≠ True or False — not equal to the expected value.
Events as Actions
Events can be used/added in actions. They are used for event dispatching and sending data.
As any other action, a delay can be applied.
Void
Dispatches the event, no data is attached.
String
Dispatches the event, and the text in the Value field is attached to it.
Number
Dispatches the event, and the number in the Value field is attached to it.
Boolean
Dispatches the event, and the boolean in the Value field is attached to it.
Debugger
The debugger allows dispatching created events in interactions, so you can simulate external calls that would come from the Model API. Enter a value and activate/submit it by clicking on the radio button.
Embed code
When at least one event is created, the code to copy in the Share popup will change to give a script (apart from the iframe that is normally there) that you should add to the site if you are planning on dispatching/listening to events from there.
<iframe
id="VECTARY_EMBED_ID"
src="https://app.beta.vectary.com/p/{model_id}"
frameborder="0"
width="100%"
height="480"
></iframe>
<script type="module">
import { VctrModelApi } from "https://app.beta.vectary.com/studio-lite/scripts/api.js";
const modelApi = new VctrModelApi("VECTARY_EMBED_ID");
await modelApi.init();
// Example of listening to events sent from Vectary
modelApi.addEventListener("event_name_1", value => {
console.log(value);
});
// Example of sending an event to Vectary
modelApi.dispatchEvent('event_name_2', 'hello');
</script>In the script you can see:
- Initialization and instantiation of the API.
- Dispatching of Events based on the events used in
triggersandconditions, with placeholder callbacks. - Registering of Event Listeners based on the events used in
actions, with placeholder values.
If you want to know more, you can check the Model API docs.