VRISM 뷰어 SDK는 React와 Vanilla JavaScript 두 환경을 모두 지원합니다.
순수 JavaScript 환경에서 사용하는 API입니다.
VrismViewer.init() 팩토리 메서드VrismViewerInstance 클래스 메서드들React 컴포넌트 환경에서 사용하는 API입니다.
<VrismViewer> 컴포넌트 props두 환경 모두에서 사용하는 공통 타입들입니다.
interface ViewerConfig {
camera?: CameraConfig
ui?: UIConfig
isMobileView?: boolean
}interface CameraConfig {
desktop?: {
angle?: { x: number; y: number }
zoom?: number
pan?: { x: number; y: number; z: number }
limits?: {
angleUp: number
angleDown: number
zoomMin: number
zoomMax: number
}
}
mobile?: {
angle?: { x: number; y: number }
zoom?: number
pan?: { x: number; y: number; z: number }
limits?: {
angleUp: number
angleDown: number
zoomMin: number
zoomMax: number
}
}
autoRotation?: number
controls?: {
enableZoom?: boolean
enablePan?: boolean
enableRotate?: boolean
}
}interface UIConfig {
viewerBackgroundColor?: string
gestureGuide?: boolean | {
enabled?: boolean
imageUrl?: string
}
userGuide?: boolean
fullscreenButton?: boolean
vtoControl?: boolean
loader?: {
enabled?: boolean
type?: 'circle' | 'bar'
size?: 'small' | 'medium' | 'large'
loaderFillColor?: string
loaderPlaceholderColor?: string
imageUrl?: string
}
step?: {
enabled: boolean
stepControls?: boolean
stepDots?: boolean
stepNavigation?: boolean
stepAnnotation?: boolean
items?: StepItem[]
}
}UI 설정 시 문자열 리터럴을 직접 입력하는 대신 SDK가 제공하는 상수를 활용할 수 있습니다. 루트 엔트리에서 바로 import할 수 있으며, 자동완성과 오타 방지에 도움이 됩니다.
import { LOADER_TYPES, LOADER_SIZES, UI_INTERFACE_TYPES } from '@vrism/viewer-sdk'
LOADER_TYPES.CIRCLE // 'circle'
LOADER_SIZES.MEDIUM // 'medium'
UI_INTERFACE_TYPES.FULLSCREEN // 'FULLSCREEN'interface Position {
x: number
y: number
z: number
}interface PickedPositionData {
anchor: {
position: Position
target: Position
}
annotation: {
marker: {
position: Position
}
content: {
title: string
description: string
}
}
}interface StepItem {
id: number
name: string
order: number
anchor: {
desktop: {
position: { x: number; y: number; z: number }
target: { x: number; y: number; z: number }
}
mobile: {
position: { x: number; y: number; z: number }
target: { x: number; y: number; z: number }
}
}
annotation: {
marker: {
position: { x?: number; y?: number; z?: number }
}
content: {
title: string
description: string
}
}
}interface StepChangeOptions {
direction?: 'prev' | 'next'
step?: number
}interface VrismThumbnail {
id: number;
thumbnailName: string;
thumbnailUrl: string;
sizeType: 'DESKTOP' | 'MOBILE';
createdAt: string;
updatedAt: string;
contentId: number;
}
interface VrismBrand {
id: number;
brandName: string;
brandCode: string;
createdAt: string;
updatedAt: string;
}
interface ViewerV2ApiResponse {
id: number;
contentId: string;
contentTitle: string;
productCode: string | null;
isOpen: boolean;
angleX: number;
angleY: number;
zoom: number;
panX: number;
panY: number;
panZ: number;
logoId: number;
angleLimitUp: number;
angleLimitDown: number;
zoomLimitMin: number;
zoomLimitMax: number;
angleXMobile: number;
angleYMobile: number;
zoomMobile: number;
panXMobile: number;
panYMobile: number;
panZMobile: number;
angleLimitUpMobile: number;
angleLimitDownMobile: number;
zoomLimitMinMobile: number;
zoomLimitMaxMobile: number;
mainColor: string;
subColor: string;
backgroundColor: string;
isBackgroundAlpha: boolean;
isThumbnailAutoUpdate: boolean;
loaderType: 'circle' | 'bar';
loaderSize: 'large' | 'medium' | 'small';
loaderImage: 'brand';
loaderImageUrl: string;
autoRotation: number;
userInterface: string;
previewImageUrl: string | undefined;
isFileUploaded: boolean;
viewerVersion: string;
withoutAutoReload?: boolean;
createdAt: string;
updatedAt: string;
deletedAt: string | null;
brandId: number;
userId: number;
categoryId: number;
thumbnails: VrismThumbnail[];
brand: VrismBrand;
env: 'live' | 'dev' | 'stage';
antialias?: boolean;
vto: {
vtoEnabled: boolean;
sku?: string;
};
stepEnabled: boolean;
stepControlsEnabled: boolean;
stepDotsEnabled: boolean;
stepNavigationEnabled: boolean;
stepAnnotationEnabled: boolean;
stepItems: StepItem[];
isMobileView?: boolean;
}interface ApiError {
message: string
status: number
code?: string
}