Getting started
Vectary Dashboard
Account Settings
How To Get Help
Library
Scene Orientation
Shortcuts
System Requirements
Studio Navigation
User Interface
Design mode
Edit mode
Left bar - Project & Workspaces
Right bar - Properties panel
Canvas tools
Control Bar
Design process
Camera
File Importing
NURBS
Object Editing
Colors and Materials
Lighting and Environments
Version History
Animated Materials
Interactions
Animations
Floating UI
Variants
Hotspot
Decals
UV mapping
2D to 3D
Figma frames import
Figma Plugin - Vectary 3D Elements
Rendering
Adding comments
Sharing and embedding
Sharing your projects
File Exporting
Clone projects (Sharing Settings)
Augmented Reality (WebAR)
Embedding to other software
Optimizing a Shared project
Loading screen
Scene performance analyzer
Model API
Introduction
Quick Start
Events & Listeners
Floating UI Configurators
Ecommerce
Type Definitions
Init
ProjectInfo
type ProjectInfo {
projectName: string;
modelId: string;
modelIdBase62: string;
publishedId: string;
workspaceId: string;
};
EventListeners
Api Events
enum ApiEvents
INTERACTION_CUSTOM_EVENT = "{custom_event_name}",
MOUSE_MOVE = "mouse_move",
MOUSE_DOWN = "mouse_down", // When click is pressed
MOUSE_CLICK = "mouse_click", // When click is released
CONFIGURATOR_STATE_CHANGE = "configurator_state_change",
}
Event Responses
{custom_event_name}
Custom events need to be setup directly in studio.
return string | number | boolean | void
configurator_state_change
return ConfigurationState[]
Configurators
ConfigurationState
type ConfigurationState = VariantSwitcherData | MaterialSwitcherData;
VariantSwitcherData
type VariantSwitcherData {
variant: string;
active_object: string;
};
MaterialSwitcherData
type MaterialSwitcherData {
object: string;
active_material: string;
};
Math
Vector3
type Vector3 = {
x: number;
y: number;
z: number;
};
Euler
type Euler = Vector3 & {
order?: string // default: 'XYZ'
};
Ray
type Ray = {
start: Vector3;
direction: Vector3;
};
RayObjectHit
type RayObjectHit = {
id: string;
name: string;
position: Vector3;
normal: Vector3;
uv: Vector3;
};
Objects
Object
type Object = {
id: string;
name: string;
type: sceneObjects;
position: Vector3;
rotation: Euler;
scale: Vector3;
materials?: Material[];
primitive?: PrimitiveNodeSettings;
text3d?: Text3DNodeSettings;
};
‣
SceneObjects
enum sceneObjects {
BUFFER_OBJECT = "BUFFER_OBJECT",
EMPTY_OBJECT = "EMPTY_OBJECT",
TEXT3D = "TEXT3D",
IMAGE_PLANE = "IMAGE_PLANE",
SVG_OBJECT = "SVG_OBJECT",
SPOT_LIGHT = "SPOT_LIGHT",
POINT_LIGHT = "POINT_LIGHT",
DIRECTIONAL_LIGHT = "DIRECTIONAL_LIGHT",
RECTANGLE_LIGHT = "RECTANGLE_LIGHT",
CAMERA = "CAMERA",
BEND = "BEND",
NOISE = "NOISE",
TAPER = "TAPER",
TWIST = "TWIST",
SIMPLIFY = "SIMPLIFY",
SPHERIFY = "SPHERIFY",
STRETCH = "STRETCH",
SKEW = "SKEW",
SMOOTH_NORMALS = "SMOOTH_NORMALS",
LINEAR_CLONER = "LINEAR_ARRAY",
RADIAL_CLONER = "RADIAL_ARRAY",
GRID_CLONER = "GRID_ARRAY",
OBJECT_CLONER = "OBJECT_ARRAY",
SYMMETRY = "SYMMETRY",
RANDOMIZE = "RANDOMIZE",
SUBDIVISION_SURFACE = "SUBDIVISION_SURFACE",
BEVEL = "BEVEL",
BOOLEAN_OPERATOR = "BOOLEAN_OPERATOR",
PRIMITIVE_BOX = "PRIMITIVE_BOX",
PRIMITIVE_SPHERE = "PRIMITIVE_SPHERE",
PRIMITIVE_CYLINDER = "PRIMITIVE_CYLINDER",
PRIMITIVE_TUBE = "PRIMITIVE_TUBE",
PRIMITIVE_CONE = "PRIMITIVE_CONE",
PRIMITIVE_POLYHEDRON = "PRIMITIVE_POLYHEDRON",
PRIMITIVE_TORUS = "PRIMITIVE_TORUS",
PRIMITIVE_CAPSULE = "PRIMITIVE_CAPSULE",
SQUARE_PLANE = "SQUARE_PLANE",
CIRCLE_PLANE = "CIRCLE_PLANE",
SHADOW_PLANE = "SHADOW_PLANE",
INFINITE_PLANE = "INFINITE_PLANE",
TEXTURE_BAKER = "TEXTURE_BAKER",
OBJECT_SWITCHER = "OBJECT_SWITCHER",
HOTSPOT = "HOTSPOT",
NURBS_OBJECT = "NURBS_OBJECT",
}
Materials
Material
type Material = {
id?: string;
name: string;
basColor?: {
textureConfig?: TextureConfig;
color?: Vector3;
};
roughness?: {
textureConfig?: TextureConfig;
value?: number;
};
metalness?: {
textureConfig?: TextureConfig;
value?: number;
};
emission?: {
textureConfig?: TextureConfig;
color?: Vector3;
value?: number;
};
normal?: {
textureConfig?: TextureConfig;
value?: number;
};
opacity?: {
textureConfig?: TextureConfig;
value?: number;
alphaMode?: AlphaMode;
alphaCutoff?: number;
};
doubleSided?: boolean;
clearcoat?: {
amount?: number;
reflectivity?: number;
roughness?: number;
};
refraction: {
amount?: number;
IOR?: number;
absorptionDepth?: number;
absorptionColor?: Vector3;
thicknessTextureConfig?: TextureConfig;
thicknessValue?: number;
};
subsurface?: {
amount?: number;
color?: Vector3;
radius?: number;
};
iridescence?: {
textureConfig?: TextureConfig;
value?: number;
};
reflectivity?: {
textureConfig?: TextureConfig;
value?: number;
};
baked?: {
ambientOcclusion?: {
textureConfig?: TextureConfig;
value?: number;
};
lightmap: {
textureConfig?: TextureConfig;
value?: number;
};
};
globalMapping?: TextureMapSettings;
};
‣
AlphaMode
enum AlphaMode {
BLEND = 0,
MASK = 1,
ADDITIVE = 2,
}
Textures
TextureConfig
type TextureConfig<T> = {
id?: string;
name?: string;
filters?: TextureFilterSettings;
mapping?: TextureMapSettings;
wrapping?: WrapMode;
};
‣
TextureFilterSettings
type TextureFilterSettings = {
brightness: number;
contrast: number;
hue: number;
saturation: number;
invert: boolean;
};
‣
TextureMapSettings
type TextureMapSettings = {
offsetY: number;
offsetX: number;
repeatX: number;
repeatY: number;
rotation: number;
};
‣
WrapMode
enum WrapMode {
REPEAT = 0,
MIRRORED_REPEAT = 1,
CLAMP = 2
}
TextureData
type TextureData = {
image: ArrayBuffer;
width: number;
height: number;
};
On this page
- Type Definitions
- Init
- ProjectInfo
- EventListeners
- Api Events
- Event Responses
- {custom_event_name}
- configurator_state_change
- Configurators
- ConfigurationState
- VariantSwitcherData
- MaterialSwitcherData
- Math
- Vector3
- Euler
- Ray
- RayObjectHit
- Objects
- Object
- SceneObjects
- Materials
- Material
- AlphaMode
- Textures
- TextureConfig
- TextureFilterSettings
- TextureMapSettings
- WrapMode
- TextureData