/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
Units
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
Variants/w=3840,quality=90,fit=scale-down)
Interactions/w=3840,quality=90,fit=scale-down)
Animations
Floating UI
Hotspots
Variables & Expressions (Beta)Scene 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 (trigger and action)
Introduction
Events allow external communication with a project by adding to interactions, enabling connections between the project and external environments.
Events enable cross-communication with a website through the Model API:
- Send information to triggers by dispatching events
- Listen from actions by subscribing to events
Events are configured in interactions (Interact mode) and can be added to triggers and actions:
- When used in triggers, they function as listeners
- When used in actions, they function as dispatchers
This enables bidirectional data exchange, allowing a model embedded on a site to send information externally and react to incoming data.
Events as Triggers
Events can be used in triggers. If an event with a matching name is dispatched (either from an action or the Model API), it activates the trigger within its interaction.
Events as Actions
Events can be used in actions for dispatching and transmitting data.
Debugger
Debugger enables event dispatching within Studio, simulating external API calls from the Model API. Enter a value and activate it by clicking the radio button.
Debugger also displays variable values and changes.
Debugger tab appears in Preview mode if at least one event exists.
Embed code
Once an event is created, the embed code in the Share popup includes a script (in addition to the standard iframe). This script should be added to the site for dispatching and listening to events.
<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>The script includes the following information:
- Initialization and instantiation of the API
- Dispatching of Events based on the events used in
triggers, with placeholder callbacks - Registering of Event Listeners based on the events used in
actions, with placeholder values
For further details, refer to the Model API docs.
