VRISM Viewer SDK
가이드
SDK
릴리즈 노트
가이드
SDK
릴리즈 노트

Vanilla JavaScript 커스터마이징

Vanilla JavaScript 환경에서 VRISM Viewer SDK를 커스터마이징하는 방법을 소개합니다.

UI 설정을 통한 커스터마이징

기본 UI 설정

const viewer = VrismSDK.VrismViewer.init('viewer-container', {
  token: 'your-token-here',
  contentId: 'your-content-id',
  config: {
    ui: {
      // 배경색 변경
      viewerBackgroundColor: '#f8f9fa',
      
      // UI 요소 제어
      gestureGuide: true,           // 제스처 가이드 표시
      fullscreenButton: true,       // 전체화면 버튼 표시
      userGuide: true,              // 사용자 가이드 표시
      vtoControl: true,             // VTO 컨트롤 표시
      
      // 로더 커스터마이징
      loader: {
        type: 'circle',             // 'circle' 또는 'bar'
        size: 'medium',             // 'small', 'medium', 'large'
        loaderFillColor: '#007bff', // 로더 색상
        loaderPlaceholderColor: '#e9ecef'
      }
    }
  }
});

카메라 설정

const viewer = VrismSDK.VrismViewer.init('viewer-container', {
  token: 'your-token-here',
  contentId: 'your-content-id',
  config: {
    camera: {
      // 자동 회전
      autoRotation: -2,
      
      // 사용자 조작 제어
      controls: {
        enableZoom: true,    // 줌 허용
        enablePan: true,     // 팬(이동) 허용  
        enableRotate: true   // 회전 허용
      },
      
      // 데스크톱 초기 위치
      desktop: {
        angle: { x: 0.2, y: 0.1 },
        zoom: 1.5,
        limits: {
          angleUp: 1.5,
          angleDown: -1.5,
          zoomMin: 0.5,
          zoomMax: 3.0
        }
      }
    }
  }
});

ℹ️ 카메라 설정의 desktop/mobile 분기는 뷰포트 너비 769px을 기준으로 자동 적용됩니다.

CSS Variables를 통한 커스터마이징

CSS 파일에 스타일 정의

/* styles.css */
.my-viewer {
  /* 전체화면 버튼 */
  --fullscreenBtnBgColor: #007bff;
  --fullscreenIconColor: white;
  --fullscreenBtnSize: 48px;
  --fullscreenBtnRight: 20px;
  --fullscreenBtnBottom: 20px;
  
  /* 사용자 가이드 버튼 */
  --guideBtnBgColor: #ffffff;
  --guideBtnIconColor: #333333;
  --guideBtnSize: 48px;
  --guideIconSize: 28px;
  --guideBtnRight: 28px;
  --guideBtnBottom: 80px;
  
  /* VTO 버튼 */
  --vtoBtnBgColor: #28a745;
  --vtoBtnColor: white;
  --vtoFontSize: 16px;
  --vtoIconSize: 28px;
  --vtoBtnLeft: 20px;
  --vtoBtnBottom: 20px;
  
  /* 제스처 가이드 */
  --gestureGuideIconSize: 48px;
}

HTML에서 사용

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
  <script src="https://unpkg.com/@vrism/viewer-sdk@0.1.0/dist/vanilla/umd.js"></script>
</head>
<body>
  <div id="viewer-container" class="my-viewer" style="width: 100%; height: 500px;"></div>
  
  <script>
    const viewer = VrismSDK.VrismViewer.init('viewer-container', {
      token: 'your-token-here',
      contentId: 'your-content-id',
      config: {
        ui: {
          fullscreenButton: true,
          userGuide: true,
          vtoControl: true
        }
      }
    });
  </script>
</body>
</html>

인라인 스타일로 적용

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/@vrism/viewer-sdk@0.1.0/dist/vanilla/umd.js"></script>
  <style>
    .brand-viewer {
      /* 브랜드 컬러로 버튼 통일 */
      --fullscreenBtnBgColor: #ff6b35;
      --fullscreenIconColor: white;
      --guideBtnBgColor: #ff6b35;
      --guideBtnIconColor: white;
      --vtoBtnBgColor: #ff6b35;
      
      /* 버튼들을 더 크게 */
      --fullscreenBtnSize: 56px;
      --guideBtnSize: 56px;
      
      /* 버튼 위치 조정 */
      --fullscreenBtnRight: 24px;
      --fullscreenBtnBottom: 24px;
      --guideBtnRight: 24px;
      --guideBtnBottom: 88px;
    }
  </style>
</head>
<body>
  <div id="viewer-container" class="brand-viewer" style="width: 100%; height: 500px;"></div>
  
  <script>
    const viewer = VrismSDK.VrismViewer.init('viewer-container', {
      token: 'your-token-here',
      contentId: 'your-content-id',
      config: {
        ui: {
          viewerBackgroundColor: '#f8f9fa',
          fullscreenButton: true,
          userGuide: true,
          vtoControl: true
        }
      }
    });
  </script>
</body>
</html>

Step Annotation 제어

마커만 끄고 스텝 기능 유지

const viewer = VrismSDK.VrismViewer.init('viewer-container', {
  token: 'your-token-here',
  contentId: 'your-content-id',
  config: {
    ui: {
      step: {
        enabled: true,           // 스텝 기능 활성화
        stepControls: true,      // 이전/다음 버튼 표시
        stepDots: true,          // 스텝 도트 네비게이션 표시
        stepAnnotation: false    // 🎯 마커만 끄기
      }
    }
  }
});

외부 제어로 커스텀 네비게이션

<div>
  <!-- 커스텀 스텝 네비게이션 -->
  <div class="custom-nav">
    <button onclick="goToStep(0)">전체 뷰</button>
    <button onclick="goToStep(1)">측면 뷰</button>
    <button onclick="goToStep(2)">상세 뷰</button>
  </div>
  
  <div id="viewer-container" style="width: 100%; height: 500px;"></div>
</div>

<script>
const viewer = VrismSDK.VrismViewer.init('viewer-container', {
  token: 'your-token-here',
  contentId: 'your-content-id',
  config: {
    ui: {
      step: {
        enabled: true,           // 스텝 기능 활성화
        stepControls: false,     // 기본 이전/다음 버튼 숨김
        stepDots: false,         // 기본 도트 네비게이션 숨김
        stepAnnotation: false    // 마커 숨김
      }
    }
  },
  onStepChange: (options) => {
    console.log('스텝 변경:', options.step, options.direction);
    currentStep = options.step || 0;
  }
});

let currentStep = 0;

// 커스텀 네비게이션 함수
window.goToStep = (step) => {
  viewer.setStep(step);
  currentStep = step;
  };
</script>

동적 설정 변경

<div>
  <button onclick="changeBackground('#ffffff')">흰색 배경</button>
  <button onclick="changeBackground('#000000')">검은색 배경</button>
  <button onclick="changeBackground('#f8f9fa')">회색 배경</button>
</div>
<div id="viewer-container" style="width: 100%; height: 500px;"></div>

<script>
  const viewer = VrismSDK.VrismViewer.init('viewer-container', {
    token: 'your-token-here',
    contentId: 'your-content-id'
  });
  
  window.changeBackground = (color) => {
    // 부분 설정 업데이트로 즉시 반영
    viewer.setConfig({
      ui: { viewerBackgroundColor: color }
    });
  };
</script>
ON THIS PAGE