-
+
+
+
-
-
-
`;
document.body.insertAdjacentHTML('beforeend', modalHTML);
- setupAFrameModalListeners();
+ setupPanoramaModalEvents();
}
-function setupAFrameModalListeners() {
- const modal = document.getElementById('aframe-modal');
- const closeBtn = document.getElementById('aframe-modal-close');
- const resetBtn = document.getElementById('aframe-reset-btn');
- const autoBtn = document.getElementById('aframe-auto-btn');
- const vrBtn = document.getElementById('aframe-vr-btn');
- const helpBtn = document.getElementById('aframe-help-btn');
- const helpText = document.getElementById('aframe-help-text');
+function setupPanoramaModalEvents() {
+ const modal = document.getElementById('panorama-modal');
+ const closeBtn = document.getElementById('panorama-close-btn');
+ const resetBtn = document.getElementById('panorama-reset-btn');
+ const autoBtn = document.getElementById('panorama-auto-btn');
+ const zoomInBtn = document.getElementById('panorama-zoom-in-btn');
+ const zoomOutBtn = document.getElementById('panorama-zoom-out-btn');
+ const helpBtn = document.getElementById('panorama-help-btn');
+ const helpPanel = document.getElementById('panorama-help-panel');
- let helpVisible = false;
+ let isAutoRotating = false;
+ let isHelpVisible = false;
// 모달 닫기
- closeBtn.addEventListener('click', closeAFrameModal);
+ closeBtn.addEventListener('click', closePanoramaModal);
modal.addEventListener('click', (e) => {
- if (e.target === modal) closeAFrameModal();
+ if (e.target === modal) closePanoramaModal();
});
- // ESC 키
+ // ESC 키로 닫기
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && modal.classList.contains('active')) {
- closeAFrameModal();
+ closePanoramaModal();
}
});
- // 리셋 버튼
+ // 초기화 버튼
resetBtn.addEventListener('click', () => {
- if (currentAFrameScene) {
- const camera = currentAFrameScene.querySelector('[camera]');
- if (camera) {
- camera.setAttribute('rotation', '0 0 0');
- camera.setAttribute('position', '0 0 0');
- }
+ if (current360Viewer) {
+ current360Viewer.reset();
}
});
- // 자동 회전 버튼
+ // 자동회전 버튼
autoBtn.addEventListener('click', () => {
- if (isAutoRotating) {
- stopAutoRotation();
- autoBtn.innerHTML = '
자동회전';
- autoBtn.classList.remove('active');
- } else {
- startAutoRotation();
- autoBtn.innerHTML = '
정지';
- autoBtn.classList.add('active');
+ if (current360Viewer) {
+ if (isAutoRotating) {
+ current360Viewer.stopAutoRotate();
+ autoBtn.innerHTML = '
자동회전';
+ autoBtn.classList.remove('active');
+ isAutoRotating = false;
+ } else {
+ current360Viewer.startAutoRotate();
+ autoBtn.innerHTML = '
정지';
+ autoBtn.classList.add('active');
+ isAutoRotating = true;
+ }
}
});
- // VR 버튼
- vrBtn.addEventListener('click', () => {
- if (currentAFrameScene) {
- const vrButton = currentAFrameScene.querySelector('[vr-mode-ui]');
- if (vrButton) {
- // VR 모드 진입
- currentAFrameScene.enterVR();
- }
+ // 확대 버튼
+ zoomInBtn.addEventListener('click', () => {
+ if (current360Viewer) {
+ current360Viewer.zoomIn();
+ }
+ });
+
+ // 축소 버튼
+ zoomOutBtn.addEventListener('click', () => {
+ if (current360Viewer) {
+ current360Viewer.zoomOut();
}
});
// 도움말 버튼
helpBtn.addEventListener('click', () => {
- helpVisible = !helpVisible;
- helpText.style.display = helpVisible ? 'block' : 'none';
- helpBtn.classList.toggle('active', helpVisible);
+ isHelpVisible = !isHelpVisible;
+ helpPanel.style.display = isHelpVisible ? 'block' : 'none';
+ helpBtn.classList.toggle('active', isHelpVisible);
});
- // 도움말 자동 숨김
- setTimeout(() => {
- helpText.style.display = 'none';
- }, 6000);
+ // 도움말 패널 클릭시 닫기
+ helpPanel.addEventListener('click', (e) => {
+ if (e.target === helpPanel) {
+ isHelpVisible = false;
+ helpPanel.style.display = 'none';
+ helpBtn.classList.remove('active');
+ }
+ });
}
-function openAFrameModal(imageSrc, title) {
- const modal = document.getElementById('aframe-modal');
- const modalTitle = document.getElementById('aframe-modal-title');
- const viewerContainer = document.getElementById('aframe-viewer');
+function openPanoramaModal(imageSrc, title) {
+ const modal = document.getElementById('panorama-modal');
+ const modalTitle = document.getElementById('panorama-modal-title');
+ const viewerContainer = document.getElementById('panorama-viewer-container');
modalTitle.textContent = title;
modal.classList.add('active');
document.body.style.overflow = 'hidden';
- // A-Frame Scene 생성
- const sceneHTML = `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- `;
-
- viewerContainer.innerHTML = sceneHTML;
- currentAFrameScene = document.getElementById('aframe-scene');
-
- // A-Frame 로딩 완료 대기
- currentAFrameScene.addEventListener('loaded', () => {
- console.log('A-Frame 360도 뷰어 로드 완료:', title);
- });
+ // 간단한 360도 좌우 스크롤 뷰어 생성
+ current360Viewer = new Easy360Viewer(viewerContainer, imageSrc, title);
}
-function startAutoRotation() {
- if (!currentAFrameScene) return;
+function closePanoramaModal() {
+ const modal = document.getElementById('panorama-modal');
+ const autoBtn = document.getElementById('panorama-auto-btn');
+ const helpBtn = document.getElementById('panorama-help-btn');
+ const helpPanel = document.getElementById('panorama-help-panel');
- isAutoRotating = true;
- const camera = currentAFrameScene.querySelector('#panorama-camera');
- let currentRotationY = 0;
-
- autoRotationInterval = setInterval(() => {
- if (camera && isAutoRotating) {
- currentRotationY += 0.5; // 초당 0.5도 회전
- if (currentRotationY >= 360) currentRotationY = 0;
-
- const currentRotation = camera.getAttribute('rotation');
- camera.setAttribute('rotation', `${currentRotation.x} ${currentRotationY} ${currentRotation.z}`);
- }
- }, 50); // 20fps
-}
-
-function stopAutoRotation() {
- isAutoRotating = false;
- if (autoRotationInterval) {
- clearInterval(autoRotationInterval);
- autoRotationInterval = null;
+ // WebGL 뷰어 정리
+ if (current360Viewer) {
+ current360Viewer.destroy();
+ current360Viewer = null;
}
-}
-
-function closeAFrameModal() {
- const modal = document.getElementById('aframe-modal');
- const autoBtn = document.getElementById('aframe-auto-btn');
- // 자동 회전 정지
- stopAutoRotation();
-
- // 버튼 초기화
- autoBtn.innerHTML = '
자동회전';
+ // UI 초기화
+ autoBtn.innerHTML = '
자동회전';
autoBtn.classList.remove('active');
-
- // A-Frame Scene 정리
- if (currentAFrameScene) {
- currentAFrameScene.destroy();
- currentAFrameScene = null;
- }
+ helpBtn.classList.remove('active');
+ helpPanel.style.display = 'none';
modal.classList.remove('active');
document.body.style.overflow = '';
// 컨테이너 정리
- document.getElementById('aframe-viewer').innerHTML = '';
+ document.getElementById('panorama-viewer-container').innerHTML = '';
}
\ No newline at end of file