프로퍼티와 메소드

View360의 API 문서를 확인해보시면 Properties 항목 및 Methods 항목에 다양한 프로퍼티와 메소드가 정의되어있는 것을 확인하실 수 있습니다.

이 프로퍼티와 메소드들은 View360의 인스턴스에 정의되어 있습니다. 즉, 예를 들어 yaw 항목을 콘솔에 표시한 이후, load() 메소드를 호출하려면 다음과 같이 코드를 작성하시면 됩니다.

// 옵션은 생략합니다.
const view360 = new View360(...);

// 현재 yaw 값을 콘솔창에 출력
console.log(view360.camera.yaw);

// 새로운 프로젝션 로드
view360.load(...);

React와 같은 프레임워크를 사용하시는 경우(예: @egjs/react-view360)에도 동일하게 사용하실 수 있습니다.
프레임워크별로 컴포넌트의 레퍼런스를 가져오는 방법은 달라집니다만, 사용하는 방법은 동일합니다.
아래가 그 예시입니다.

• React
• Angular
• Vue@2
• Vue@3
• Svelte

import React, { useRef, useEffect } from "react";
import View360 from "@egjs/view360";

// 타입스크립트(.tsx) 코드입니다.
export default () => {
  const viewerRef = useRef<View360>();

  useEffect(() => {
    // 인스턴스를 가져왔습니다. 이걸로 프로퍼티와 메소드에 접근 가능합니다.
    const view360 = viewerRef.current;

    console.log(view360.camera.yaw);
    view360.load(...);
  }, []);

  return <View360 ref={viewerRef} />;
}