Getting started
Vectary DashboardAccount SettingsRolesHow To Get HelpLibraryScene OrientationShortcutsSystem RequirementsStudio Navigation
User InterfaceDesign modeEdit modeLeft bar - Project & Workspaces Right bar - Properties panelCanvas toolsControl BarDesign process
CameraFile ImportingNURBS (CAD)Object EditingColors and MaterialsLighting and EnvironmentsVersion HistoryAnimated MaterialsInteractionsAnimationsFloating UIVariantsHotspotDecalsUV mapping2D to 3DFigma frames import Figma Plugin - Vectary 3D Studio LiteRenderingAdding commentsSharing and embedding
Sharing your projectsFile ExportingClone projects (Sharing Settings)Augmented Reality (WebAR)WebXR (beta)Embedding to other softwareOptimizing a Shared projectLoading screenScene performance analyzerModel API
IntroductionQuick StartEvents & ListenersFloating UI ConfiguratorsEcommerceType 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",
SELECTION_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
Primitives
PrimitiveNodeSettings
type PrimitiveNodeSettings =
| PrimitiveBoxSettings
| PrimitiveConeSettings
| PrimitiveCylinderSettings
| PrimitivePolyhedronSettings
| PrimitiveSphereSettings
| PrimitiveTorusSettings
| PrimitiveTubeSettings
| PrimitiveCapsuleSettings
| PrimitiveSquarePlaneSettings
| PrimitiveCirclePlaneSettings
| PrimitiveInfinitePlaneSettings;
PrimitiveBoxSettings
type PrimitiveBoxSettings = {
boxDimensions: {
x: number;
y: number;
z: number;
};
boxSegments: {
x: number;
y: number;
z: number;
};
roundnessEnabled: boolean;
roundnessRadius: number;
roundnessRadiusSegments: number;
computeNormals: boolean;
}
PrimitiveConeSettings
type PrimitiveConeSettings = {
coneRadiusBottom: number;
coneHeight: number;
coneRadiusSegments: number;
coneHeightSegments: number;
coneCloseEnds: boolean;
roundnessEnabled: boolean;
roundnessRadius: number;
roundnessRadiusSegments: number;
computeNormals: boolean;
}
PrimitiveCylinderSettings
type PrimitiveCylinderSettings = {
cylinderRadiusTop: number;
cylinderRadiusBottom: number;
cylinderHeight: number;
cylinderRadiusSegments: number;
cylinderHeightSegments: number;
cylinderCapSegments: number;
cylinderCloseEnds: boolean;
roundnessEnabled: boolean;
roundnessRadius: number;
roundnessRadiusSegments: number;
computeNormals: boolean;
}
PrimitivePolyhedronSettings
type PrimitivePolyhedronSettings = {
polyhedronRadius: number;
polyhedronDetail: number;
computeNormals: boolean;
}
PrimitiveSphereSettings
type PrimitiveSphereSettings = {
sphereRadius: number;
sphereWidthSegments: number;
sphereHeightSegments: number;
computeNormals: boolean;
}
PrimitiveTorusSettings
type PrimitiveTorusSettings = {
torusRingRadius: number;
torusTubeRadius: number;
torusTubeSegments: number;
torusRingSegments: number;
computeNormals: boolean;
}
PrimitiveTubeSettings
type PrimitiveTubeSettings = {
tubeRadiusIn: number;
tubeRadiusOut: number;
tubeHeight: number;
tubeRadiusSegments: number;
tubeHeightSegments: number;
tubeSideSegments: number;
roundnessEnabled: boolean;
roundnessRadius: number;
roundnessRadiusSegments: number;
computeNormals: boolean;
}
PrimitiveSquarePlaneSettings
type PrimitiveSquarePlaneSettings = {
width: number;
depth: number;
widthSegments: number;
depthSegments: number;
cropSettings: {
x: number;
y: number;
width: number;
height: number;
};
roundnessEnabled: boolean;
roundnessRadius: number;
roundnessRadiusSegments: number;
computeNormals: boolean;
}
PrimitiveInfinitePlaneSettings
type PrimitiveInfinitePlaneSettings = {
dimensions: { x: number; y: number; z: number };
offset: number;
angle: number;
segments: number;
computeNormals: boolean;
}
Text3D
export type Text3DNodeSettings = {
text?: string;
fontFamily?: string;
fontSize?: number;
weight?: string;
distanceX?: number;
distanceY?: number;
textAlign?: 'LEFT' | 'CENTER' | 'RIGHT' | 'JUSTIFY';
textHeight?: 'DEFAULT' | 'CAMELCASE' | 'UPPERCASE' | 'LOWERCASE';
curveSegments?: number;
contourOffset?: number;
amount?: number;
};
Materials
Material
type Material = {
id?: string;
name: string;
baseColor?: {
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
Textures
TextureConfig
type TextureConfig<T> = {
id?: string;
name?: string;
filters?: TextureFilterSettings;
mapping?: TextureMapSettings;
wrapping?: WrapMode;
};
‣
TextureFilterSettings
‣
TextureMapSettings
‣
WrapMode
TextureData
type TextureData = {
image: ArrayBuffer;
width: number;
height: number;
};
Cameras
CameraSettings
type CameraSettings = {
cameraType?: CameraType;
previewControls?: {
orbitLimits?: {
upLimit?: number;
downLimit?: number;
leftLimit?: number;
rightLimit?: number;
};
dollyLimits?: {
inLimit?: number;
outLimit?: number;
};
panLimits?: {
enabled?: boolean;
};
};
previewTurntable?: {
delay?: number;
duration?: number;
resume?: boolean;
easing?: number;
};
perspective?: {
fov?: number;
};
depthOfField?: {
intensity?: number;
depthOffset?: number;
};
aspectRatio?: {
customWidth?: number;
customHeight?: number;
};
};
CameraType
enum CameraType {
UNKNOWN = 0,
PERSPECTIVE = 1,
ORTHOGRAPHIC = 2,
}
CameraViewState
type CameraViewState = {
target: Vector3;
position: Vector3;
upVector: Vector3;
};
Exports
Export3dFormats
enum Export3DFormats {
OBJ = 'OBJ',
GLTF = 'GLTF',
GLB = 'GLB',
DAE = 'DAE',
USDZ = 'USDZ',
FBX = 'FBX',
STL = 'STL',
}
ExportOptions
type ExportOptions = {
fbx?: 'ASCII' | 'Binary';
applyParentMatrix?: boolean;
exportOnlyUsedUVs?: boolean;
};
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
- Primitives
- PrimitiveNodeSettings
- PrimitiveBoxSettings
- PrimitiveConeSettings
- PrimitiveCylinderSettings
- PrimitivePolyhedronSettings
- PrimitiveSphereSettings
- PrimitiveTorusSettings
- PrimitiveTubeSettings
- PrimitiveSquarePlaneSettings
- PrimitiveInfinitePlaneSettings
- Text3D
- Materials
- Material
- AlphaMode
- Textures
- TextureConfig
- TextureFilterSettings
- TextureMapSettings
- WrapMode
- TextureData
- Cameras
- CameraSettings
- CameraType
- CameraViewState
- Exports
- Export3dFormats
- ExportOptions