본문으로 건너뛰기

View360Options

Since version 4.0.0

source

View360용 옵션들

interface View360Options extends CameraOptions, PanoControlOptions

Extends

See

Detailed Example

Properties

autoInit
autoResize
autoplay
canvasSelector
debug
disableContextMenu

마우스 우클릭시 표시되는 컨텍스트 메뉴를 비활성화합니다.

fov

카메라의 수평 FOV(Field of View) 값. (도 단위, °)

gyro

GyroControl용 옵션들.
false일 경우 자이로스코프를 통한 컨트롤이 비활성화됩니다.

hotspot
initialPitch

카메라의 초기 pitch(x축 회전)값 (도 단위, °)
View360은 오른손 좌표계를 사용하기 때문에, 양(+)의 값은 카메라가 위를 보게 하고, 음(-)의 값은 카메라가 아래를 보게 합니다.

initialYaw

카메라의 초기 yaw(y축 회전)값 (도 단위, °)
View360은 오른손 좌표계를 사용하기 때문에, 카메라가 해당 값만큼 시계 반대방향으로 회전합니다.

initialZoom

카메라의 초기 줌 값.
이 값을 2로 설정할 경우 파노라마 이미지를 가로 기준 200%만큼 확대합니다.

maxDeltaTime
on
pitchRange

pitch(x축 회전) 범위를 제한합니다. (도 단위, °)

plugins
projection
rotate

RotateControl용 옵션들.
false일 경우 회전이 비활성화됩니다.

scrollable

true로 설정할 경우, 모바일(터치) 환경의 캔버스 영역 내에서 스크롤을 가능하게 합니다.

주의

이 값을 활성화할 경우, 사용자가 카메라 뷰를 위/아래로 바꾸기 위해서는 먼저 가로로 스와이프한 이후에 세로로 스와이프해야만 합니다.

tabIndex
useGrabCursor

마우스 사용시 CSS cursor값을 자동으로 변경할지 여부.
true일 경우 기본 상태에서 cursor: "grab"을, 입력 도중에 cursor: "grabbing"을 캔버스에 적용합니다.

useResizeObserver
wheelScrollable

true로 설정할 경우, 캔버스 영역 내에서 마우스 휠을 이용한 페이지 스크롤이 가능해집니다.

주의

이 값을 활성화할 경우, 마우스 휠을 통한 줌이 불가능하게 됩니다.

yawRange

yaw(y축 회전) 범위를 제한합니다. (도 단위, °)

zoom

ZoomControl용 옵션들.
false일 경우 줌이 비활성화됩니다.

zoomRange

카메라 줌 범위를 제한합니다.
null일 경우 기본값으로 0.6에서 10의 범위를 사용합니다.

Properties​

autoInit​

autoInit

boolean

source

autoResize​

autoResize

boolean

source

autoplay​

autoplay

boolean | Partial<AutoplayOptions>

source

canvasSelector​

canvasSelector

string

source

debug​

debug

boolean

source

disableContextMenu​

>=4.0.0
inherited
disableContextMenu

boolean

false

마우스 우클릭시 표시되는 컨텍스트 메뉴를 비활성화합니다.

source

fov​

>=4.0.0
inherited
fov

number

90

카메라의 수평 FOV(Field of View) 값. (도 단위, °)

Example
// Init with fov: 120
const viewer = new View360("#el_id", { fov: 120 });

// Back to 90
viewer.fov = 90;

source

gyro​

>=4.0.0
inherited
gyro

boolean | Partial<GyroControlOptions>

GyroControl용 옵션들.
false일 경우 자이로스코프를 통한 컨트롤이 비활성화됩니다.

source

hotspot​

hotspot

Partial<HotspotOptions>

source

initialPitch​

>=4.0.0
inherited
initialPitch

number

0

카메라의 초기 pitch(x축 회전)값 (도 단위, °)
View360은 오른손 좌표계를 사용하기 때문에, 양(+)의 값은 카메라가 위를 보게 하고, 음(-)의 값은 카메라가 아래를 보게 합니다.

Example
const viewer = new View360("#el_id", {
  initialPitch: 60
});

viewer.on("ready", () => {
  console.log(viewer.camera.pitch); // 60
});

source

initialYaw​

>=4.0.0
inherited
initialYaw

number

0

카메라의 초기 yaw(y축 회전)값 (도 단위, °)
View360은 오른손 좌표계를 사용하기 때문에, 카메라가 해당 값만큼 시계 반대방향으로 회전합니다.

Example
const viewer = new View360("#el_id", {
  initialYaw: 30
});

viewer.on("ready", () => {
  console.log(viewer.camera.yaw); // 30
});

source

initialZoom​

>=4.0.0
inherited
initialZoom

number

1

카메라의 초기 줌 값.
이 값을 2로 설정할 경우 파노라마 이미지를 가로 기준 200%만큼 확대합니다.

Example
const viewer = new View360("#el_id", {
  initialZoom: 2
});

viewer.on("ready", () => {
  console.log(viewer.camera.zoom); // 2
});

source

maxDeltaTime​

maxDeltaTime

number

source

on​

on

Partial<{ beforeRender: ((evt: BeforeRenderEvent) => any); inputEnd: ((evt: InputEndEvent) => any); inputStart: ((evt: InputStartEvent) => any); load: ((evt: LoadEvent) => any); loadStart: ((evt: LoadStartEvent) => any); projectionChange: ((evt: ProjectionChangeEvent) => any); ready: ((evt: ReadyEvent) => any); render: ((evt: RenderEvent) => any); resize: ((evt: ResizeEvent) => any); staticClick: ((evt: StaticClickEvent) => any); viewChange: ((evt: ViewChangeEvent) => any); vrEnd: ((evt: VREndEvent) => any); vrStart: ((evt: VRStartEvent) => any) }>

source

pitchRange​

>=4.0.0
inherited
pitchRange

null | Range

null

pitch(x축 회전) 범위를 제한합니다. (도 단위, °)

Example
const viewer = new View360("#el_id", {
  pitchRange: [-45, 45]
});

viewer.on("ready", () => {
  console.log(viewer.camera.pitch); // 0
  viewer.camera.lookAt({ pitch: 60  });
  console.log(viewer.camera.pitch); // 45
});

source

plugins​

plugins

View360Plugin[]

source

projection​

projection

null | Projection

source

rotate​

>=4.0.0
inherited
rotate

boolean | Partial<RotateControlOptions>

RotateControl용 옵션들.
false일 경우 회전이 비활성화됩니다.

source

scrollable​

>=4.0.0
inherited
scrollable

boolean

true

true로 설정할 경우, 모바일(터치) 환경의 캔버스 영역 내에서 스크롤을 가능하게 합니다.

주의

이 값을 활성화할 경우, 사용자가 카메라 뷰를 위/아래로 바꾸기 위해서는 먼저 가로로 스와이프한 이후에 세로로 스와이프해야만 합니다.

source

tabIndex​

tabIndex

null | number

source

useGrabCursor​

>=4.0.0
inherited
useGrabCursor

boolean

true

마우스 사용시 CSS cursor값을 자동으로 변경할지 여부.
true일 경우 기본 상태에서 cursor: "grab"을, 입력 도중에 cursor: "grabbing"을 캔버스에 적용합니다.

source

useResizeObserver​

useResizeObserver

boolean

source

wheelScrollable​

>=4.0.0
inherited
wheelScrollable

boolean

false

true로 설정할 경우, 캔버스 영역 내에서 마우스 휠을 이용한 페이지 스크롤이 가능해집니다.

주의

이 값을 활성화할 경우, 마우스 휠을 통한 줌이 불가능하게 됩니다.

source

yawRange​

>=4.0.0
inherited
yawRange

null | Range

yaw(y축 회전) 범위를 제한합니다. (도 단위, °)

Example
const viewer = new View360("#el_id", {
  yawRange: [-30, 30]
});

viewer.on("ready", () => {
  console.log(viewer.camera.yaw); // 0
  viewer.camera.lookAt({ yaw: 60  });
  console.log(viewer.camera.yaw); // 30
});

source

zoom​

>=4.0.0
inherited
zoom

boolean | Partial<ZoomControlOptions>

ZoomControl용 옵션들.
false일 경우 줌이 비활성화됩니다.

source

zoomRange​

>=4.0.0
inherited
zoomRange

null | Range

null

카메라 줌 범위를 제한합니다.
null일 경우 기본값으로 0.6에서 10의 범위를 사용합니다.

Example
const viewer = new View360("#el_id", {
  zoomRange: [0.5, 4]
});

viewer.on("ready", () => {
  console.log(viewer.camera.zoom); // 1
  viewer.camera.lookAt({ zoom: 6  });
  console.log(viewer.camera.zoom); // 4
});

source