Type Definitions

Getting started

Vectary Dashboard

Studio Navigation

Left bar - Project & Workspaces

Right bar - Properties panel

Design process

Lighting and Environments

Figma Plugin - Vectary 3D Studio Lite

Rendering

Adding comments

Sharing and embedding

File Exporting

Clone projects (Sharing Settings)

Augmented Reality (WebAR)

WebXR (beta)

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",
	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;
};