967 lines
36 KiB
HTML
967 lines
36 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
|
|||
|
|
<!--
|
|||
|
|
Lightweight browser based viewer for 360 degree images and videos.
|
|||
|
|
Created by Ben Egan: https://github.com/ProGamerGov
|
|||
|
|
|
|||
|
|
|
|||
|
|
Controls
|
|||
|
|
|
|||
|
|
| Action | How to Use |
|
|||
|
|
| ------------------ | -------------------------------------------|
|
|||
|
|
| Navigate View | Left-click + drag or touch + drag |
|
|||
|
|
| Zoom | Mouse wheel or pinch gesture |
|
|||
|
|
| Fullscreen | Browser fullscreen and VR headset control |
|
|||
|
|
| Stereo Toggle | Bottom-left "Stereo" button |
|
|||
|
|
| Screenshot | Camera icon at bottom center |
|
|||
|
|
| Upload/Reset Media | "Upload" button below controls |
|
|||
|
|
| Play/Pause Video | Play/pause button on video controls |
|
|||
|
|
| Seek in Video | Use the timeline slider |
|
|||
|
|
|
|||
|
|
Additonal info
|
|||
|
|
- Stereo Toggle: Switch between monoscopic and stereo images (mono/top-bottom/side-by-side)
|
|||
|
|
- Upload/Reset Media: New media can be uploaded via drag and drop at any time.
|
|||
|
|
|
|||
|
|
|
|||
|
|
Loading from external URLs
|
|||
|
|
- Images and videos can be loaded from other websites by appending '?url=' or '?src=' to the viewer URL, followed by the direct media link.
|
|||
|
|
- Example: https://progamergov.github.io/html-360-viewer?url=https://example.com/example_image.jpg
|
|||
|
|
- This only works when the viewer is hosted via a local or remote web server (not directly opened as a file).
|
|||
|
|
- See here for more details: https://aframe.io/docs/1.7.0/introduction/installation.html#use-a-local-server
|
|||
|
|
- You can also provide the mono/stereo viewing mode that should be used when loading the image.
|
|||
|
|
- To specify the viewing mode to use, append '&stereo=0' for monoscopic (default), '&stereo=1' for up/down stereo, and '&stereo=2' for right/left stereo.
|
|||
|
|
- Example: https://progamergov.github.io/html-360-viewer?url=https://example.com/example_image.jpg&stereo=0
|
|||
|
|
|
|||
|
|
|
|||
|
|
BibTeX
|
|||
|
|
@misc{egan2025html360viewer,
|
|||
|
|
title={Browser-Based Viewer for 360 Images and Videos},
|
|||
|
|
author={Egan, Ben},
|
|||
|
|
year={2025},
|
|||
|
|
publisher={GitHub},
|
|||
|
|
howpublished={\url{https://github.com/ProGamerGov/html-360-viewer}}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
MIT License
|
|||
|
|
Copyright (c) 2025 Ben Egan
|
|||
|
|
-->
|
|||
|
|
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<!-- Primary Meta Tags -->
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|||
|
|
<meta name="title" content="Browser-Based Viewer for 360° Images and Videos">
|
|||
|
|
<meta name="description" content="A lightweight, browser-based viewer for interactive 360° panoramas and videos. Supports monoscopic and stereo formats, zoom, and screenshot.">
|
|||
|
|
|
|||
|
|
<!-- Open Graph -->
|
|||
|
|
<meta property="og:type" content="website">
|
|||
|
|
<meta property="og:url" content="https://progamergov.github.io/html-360-viewer">
|
|||
|
|
<meta property="og:title" content="Browser-Based Viewer for 360° Images and Videos">
|
|||
|
|
<meta property="og:description" content="A lightweight, browser-based viewer for interactive 360° panoramas and videos. Supports monoscopic and stereo formats, zoom, and screenshot.">
|
|||
|
|
<meta property="og:image" content="https://raw.githubusercontent.com/ProGamerGov/html-360-viewer/main/examples/example_image.png">
|
|||
|
|
|
|||
|
|
<!-- Page Title -->
|
|||
|
|
<title>360° Panorama & Video Viewer</title>
|
|||
|
|
|
|||
|
|
<!-- A-Frame -->
|
|||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/1.7.0/aframe.min.js"></script>
|
|||
|
|
|
|||
|
|
<!-- Material Symbols for icons -->
|
|||
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
/* --- Layout & Typography --- */
|
|||
|
|
* { box-sizing: border-box; }
|
|||
|
|
body {
|
|||
|
|
margin: 0;
|
|||
|
|
font-family: Arial, sans-serif;
|
|||
|
|
overflow: hidden;
|
|||
|
|
touch-action: pan-x pan-y; /* disable pinch-zoom */
|
|||
|
|
}
|
|||
|
|
#container {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100vh;
|
|||
|
|
position: relative;
|
|||
|
|
background: #000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* --- Drop area --- */
|
|||
|
|
#dropArea {
|
|||
|
|
position: absolute;
|
|||
|
|
inset: 0;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
background: #f5f5f5;
|
|||
|
|
border: 3px dashed #ccc;
|
|||
|
|
z-index: 10;
|
|||
|
|
transition: 0.2s ease all;
|
|||
|
|
}
|
|||
|
|
#dropArea.hidden { display: none; }
|
|||
|
|
#dropArea h2 { margin-bottom: 12px; color: #333; }
|
|||
|
|
#fileInput { display: none; }
|
|||
|
|
#selectButton {
|
|||
|
|
padding: 12px 24px;
|
|||
|
|
background: #4285f4;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 16px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
#selectButton:hover { background: #3367d6; }
|
|||
|
|
|
|||
|
|
/* --- A-Frame container --- */
|
|||
|
|
#aframeContainer {
|
|||
|
|
position: absolute;
|
|||
|
|
inset: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* --- Global controls wrapper --- */
|
|||
|
|
#controls {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 20px;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
z-index: 20;
|
|||
|
|
display: none;
|
|||
|
|
text-align: center;
|
|||
|
|
user-select: none;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.control-button {
|
|||
|
|
padding: 6px 12px;
|
|||
|
|
background: rgba(0,0,0,0.5);
|
|||
|
|
color: #fff;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
font-size: 14px;
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
margin-right: 8px;
|
|||
|
|
}
|
|||
|
|
.control-button:hover { background: rgba(0,0,0,0.7); }
|
|||
|
|
.control-button.active { background: #4285f4; }
|
|||
|
|
.control-row {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* --- Modern video controls --- */
|
|||
|
|
#videoControls {
|
|||
|
|
display: none;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 12px;
|
|||
|
|
background: rgba(0,0,0,0.6);
|
|||
|
|
padding: 10px 14px;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
box-shadow: 0 4px 10px rgba(0,0,0,0.35);
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
}
|
|||
|
|
#playPauseButton {
|
|||
|
|
width: 42px;
|
|||
|
|
height: 42px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
border: none;
|
|||
|
|
background: #4285f4;
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 18px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: background 0.2s;
|
|||
|
|
}
|
|||
|
|
#playPauseButton:hover { background: #3367d6; }
|
|||
|
|
|
|||
|
|
/* Slider styling */
|
|||
|
|
#videoSlider {
|
|||
|
|
-webkit-appearance: none;
|
|||
|
|
width: 320px;
|
|||
|
|
height: 6px;
|
|||
|
|
background: #ddd;
|
|||
|
|
border-radius: 3px;
|
|||
|
|
outline: none;
|
|||
|
|
}
|
|||
|
|
#videoSlider::-webkit-slider-thumb {
|
|||
|
|
-webkit-appearance: none;
|
|||
|
|
width: 16px;
|
|||
|
|
height: 16px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: #4285f4;
|
|||
|
|
cursor: pointer;
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
#videoSlider::-moz-range-thumb {
|
|||
|
|
width: 16px;
|
|||
|
|
height: 16px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: #4285f4;
|
|||
|
|
cursor: pointer;
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* --- Loading indicator & zoom info --- */
|
|||
|
|
#loadingIndicator {
|
|||
|
|
position: absolute;
|
|||
|
|
inset: 0;
|
|||
|
|
display: none;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
z-index: 30;
|
|||
|
|
background: rgba(255,255,255,0.6);
|
|||
|
|
backdrop-filter: blur(3px);
|
|||
|
|
}
|
|||
|
|
.spinner {
|
|||
|
|
width: 40px;
|
|||
|
|
height: 40px;
|
|||
|
|
border: 4px solid rgba(0,0,0,0.15);
|
|||
|
|
border-left-color: #4285f4;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
animation: spin 1s linear infinite;
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
}
|
|||
|
|
@keyframes spin { 0% {transform: rotate(0);} 100% {transform: rotate(360deg);} }
|
|||
|
|
|
|||
|
|
#zoomInfo {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 20px;
|
|||
|
|
right: 20px;
|
|||
|
|
background: rgba(0,0,0,0.55);
|
|||
|
|
color: #fff;
|
|||
|
|
padding: 6px 10px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
z-index: 20;
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* --- Stereo Button --- */
|
|||
|
|
#stereoButton {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 20px;
|
|||
|
|
left: 20px;
|
|||
|
|
z-index: 20;
|
|||
|
|
padding: 6px 10px;
|
|||
|
|
background: rgba(0,0,0,0.6);
|
|||
|
|
color: #fff;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
font-size: 13px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
#stereoButton:hover { background: rgba(0,0,0,0.8); }
|
|||
|
|
#stereoButton.active { background: rgba(66,133,244,0.8); }
|
|||
|
|
|
|||
|
|
/* --- Upload Button --- */
|
|||
|
|
#resetButton {
|
|||
|
|
padding: 8px 16px;
|
|||
|
|
background: rgba(0,0,0,0.5);
|
|||
|
|
color: #fff;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
font-size: 14px;
|
|||
|
|
z-index: 25;
|
|||
|
|
display: none;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
height: 36px;
|
|||
|
|
}
|
|||
|
|
#resetButton:hover { background: rgba(0,0,0,0.7); }
|
|||
|
|
|
|||
|
|
/* --- Screenshot Button --- */
|
|||
|
|
#screenshotButton {
|
|||
|
|
padding: 0;
|
|||
|
|
background: rgba(0,0,0,0.5);
|
|||
|
|
color: #fff;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
font-size: 14px;
|
|||
|
|
z-index: 25;
|
|||
|
|
display: none;
|
|||
|
|
margin-left: 8px;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
height: 36px;
|
|||
|
|
width: 36px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
line-height: 1;
|
|||
|
|
}
|
|||
|
|
#screenshotButton:hover { background: rgba(0,0,0,0.7); }
|
|||
|
|
|
|||
|
|
/* --- Bottom buttons container --- */
|
|||
|
|
#bottomButtonsContainer {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* --- Screenshot flash effect --- */
|
|||
|
|
#screenshotFlash {
|
|||
|
|
position: absolute;
|
|||
|
|
inset: 0;
|
|||
|
|
background: white;
|
|||
|
|
opacity: 0;
|
|||
|
|
z-index: 40;
|
|||
|
|
pointer-events: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* --- Screenshot feedback --- */
|
|||
|
|
#screenshotFeedback {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
background: rgba(0,0,0,0.7);
|
|||
|
|
color: white;
|
|||
|
|
padding: 12px 20px;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
z-index: 45;
|
|||
|
|
opacity: 0;
|
|||
|
|
transition: opacity 0.3s;
|
|||
|
|
pointer-events: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* --- Media drop overlay --- */
|
|||
|
|
#globalDropOverlay {
|
|||
|
|
position: absolute;
|
|||
|
|
inset: 0;
|
|||
|
|
background: rgba(18, 85, 204, 0.7);
|
|||
|
|
border: 5px dashed #fff;
|
|||
|
|
z-index: 50;
|
|||
|
|
display: none;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
color: white;
|
|||
|
|
font-size: 24px;
|
|||
|
|
backdrop-filter: blur(2px);
|
|||
|
|
}
|
|||
|
|
#globalDropOverlay p {
|
|||
|
|
background: rgba(0, 0, 0, 0.5);
|
|||
|
|
padding: 15px 30px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Material icons styles */
|
|||
|
|
.material-symbols-outlined {
|
|||
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|||
|
|
font-size: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ------------- Mobile Device Override ------------- */
|
|||
|
|
@media (max-width: 900px) {
|
|||
|
|
/* lift control bar */
|
|||
|
|
#controls { bottom: 80px !important; }
|
|||
|
|
|
|||
|
|
/* lift the Stereo toggle to the same line */
|
|||
|
|
#stereoButton { bottom: 80px !important; }
|
|||
|
|
|
|||
|
|
/* pull A-Frame’s VR / fullscreen button up and over everything */
|
|||
|
|
.a-enter-vr-button {
|
|||
|
|
bottom: 80px !important;
|
|||
|
|
z-index: 1000 !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ------------- Hide Image Highlighting ------------- */
|
|||
|
|
::selection {
|
|||
|
|
background: transparent;
|
|||
|
|
}
|
|||
|
|
::moz-selection {
|
|||
|
|
background: transparent;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div id="container">
|
|||
|
|
<div id="dropArea">
|
|||
|
|
<h2>Select or Drag & Drop a 360° Media</h2>
|
|||
|
|
<p>Supported formats: All images, MP4, WebM</p>
|
|||
|
|
<input type="file" id="fileInput" accept="image/*, video/mp4, video/webm" />
|
|||
|
|
<button id="selectButton">Select Media</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div id="aframeContainer"></div>
|
|||
|
|
|
|||
|
|
<div id="controls">
|
|||
|
|
<div id="videoControls">
|
|||
|
|
<button id="playPauseButton"><span class="material-symbols-outlined">pause</span></button>
|
|||
|
|
<input type="range" id="videoSlider" min="0" max="100" value="0" step="0.1" />
|
|||
|
|
</div>
|
|||
|
|
<div id="bottomButtonsContainer">
|
|||
|
|
<button id="resetButton" class="control-button">Upload</button>
|
|||
|
|
<button id="screenshotButton" class="control-button" title="Take screenshot">
|
|||
|
|
<span class="material-symbols-outlined">photo_camera</span>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<button id="stereoButton">Stereo</button>
|
|||
|
|
|
|||
|
|
<div id="loadingIndicator">
|
|||
|
|
<div class="spinner"></div>
|
|||
|
|
<p>Loading media…</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div id="zoomInfo">Zoom: 80°</div>
|
|||
|
|
|
|||
|
|
<!-- Screenshot flash animation -->
|
|||
|
|
<div id="screenshotFlash"></div>
|
|||
|
|
|
|||
|
|
<!-- Screenshot feedback -->
|
|||
|
|
<div id="screenshotFeedback">Screenshot saved!</div>
|
|||
|
|
|
|||
|
|
<!-- Global drop overlay -->
|
|||
|
|
<div id="globalDropOverlay">
|
|||
|
|
<p>Drop 360° media to replace current view</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// Extract media URL from query parameters if present
|
|||
|
|
function getMediaUrlFromParams() {
|
|||
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|||
|
|
const mediaUrl = urlParams.get('url') || urlParams.get('src');
|
|||
|
|
const stereoParam = urlParams.get('stereo');
|
|||
|
|
|
|||
|
|
let stereoMode = 0; // Default: mono
|
|||
|
|
|
|||
|
|
if (stereoParam) {
|
|||
|
|
const stereoLower = stereoParam.toLowerCase();
|
|||
|
|
switch (stereoLower) {
|
|||
|
|
case 'tb':
|
|||
|
|
case 'vertical':
|
|||
|
|
case '1':
|
|||
|
|
stereoMode = 1;
|
|||
|
|
break;
|
|||
|
|
case 'lr':
|
|||
|
|
case 'horizontal':
|
|||
|
|
case '2':
|
|||
|
|
stereoMode = 2;
|
|||
|
|
break;
|
|||
|
|
default:
|
|||
|
|
stereoMode = 0; // mono
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
url: mediaUrl,
|
|||
|
|
stereoMode: stereoMode
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|||
|
|
/* ------------------ DOM references ------------------ */
|
|||
|
|
const elements = {
|
|||
|
|
dropArea: document.getElementById('dropArea'),
|
|||
|
|
fileInput: document.getElementById('fileInput'),
|
|||
|
|
selectButton: document.getElementById('selectButton'),
|
|||
|
|
aframeContainer: document.getElementById('aframeContainer'),
|
|||
|
|
controls: document.getElementById('controls'),
|
|||
|
|
resetButton: document.getElementById('resetButton'),
|
|||
|
|
stereoButton: document.getElementById('stereoButton'),
|
|||
|
|
videoControls: document.getElementById('videoControls'),
|
|||
|
|
playPauseButton: document.getElementById('playPauseButton'),
|
|||
|
|
videoSlider: document.getElementById('videoSlider'),
|
|||
|
|
loadingIndicator: document.getElementById('loadingIndicator'),
|
|||
|
|
zoomInfo: document.getElementById('zoomInfo'),
|
|||
|
|
screenshotButton: document.getElementById('screenshotButton'),
|
|||
|
|
screenshotFlash: document.getElementById('screenshotFlash'),
|
|||
|
|
screenshotFeedback: document.getElementById('screenshotFeedback'),
|
|||
|
|
globalDropOverlay: document.getElementById('globalDropOverlay'),
|
|||
|
|
container: document.getElementById('container')
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/* ------------------ App state ------------------ */
|
|||
|
|
const state = {
|
|||
|
|
scene: null,
|
|||
|
|
videoElement: null,
|
|||
|
|
isPlaying: true,
|
|||
|
|
currentFov: 80,
|
|||
|
|
currentMedia: null,
|
|||
|
|
isMediaImage: false,
|
|||
|
|
stereoMode: 0,
|
|||
|
|
isDraggingFile: false
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/* ------------------ Helpers ------------------ */
|
|||
|
|
const helpers = {
|
|||
|
|
showLoading: (flag) => {
|
|||
|
|
elements.loadingIndicator.style.display = flag ? 'flex' : 'none';
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
updateFov: (delta) => {
|
|||
|
|
state.currentFov = Math.min(179, Math.max(1, state.currentFov + delta));
|
|||
|
|
const cam = document.querySelector('#mainCamera');
|
|||
|
|
if (cam) cam.setAttribute('camera', 'fov', state.currentFov);
|
|||
|
|
elements.zoomInfo.textContent = `Zoom: ${Math.round(state.currentFov)}°`;
|
|||
|
|
elements.zoomInfo.style.background = 'rgba(66,133,244,0.7)';
|
|||
|
|
setTimeout(() => elements.zoomInfo.style.background = 'rgba(0,0,0,0.55)', 300);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
updatePlayPauseIcon: () => {
|
|||
|
|
elements.playPauseButton.innerHTML = state.isPlaying ?
|
|||
|
|
'<span class="material-symbols-outlined">pause</span>' :
|
|||
|
|
'<span class="material-symbols-outlined">play_arrow</span>';
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
preventDefaults: (e) => {
|
|||
|
|
e.preventDefault();
|
|||
|
|
e.stopPropagation();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
updateStereoButton: () => {
|
|||
|
|
if (state.stereoMode > 0) {
|
|||
|
|
elements.stereoButton.classList.add('active');
|
|||
|
|
} else {
|
|||
|
|
elements.stereoButton.classList.remove('active');
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
updateSlider: () => {
|
|||
|
|
if (!state.videoElement || !state.videoElement.duration) return;
|
|||
|
|
const val = (state.videoElement.currentTime / state.videoElement.duration) * 100;
|
|||
|
|
elements.videoSlider.value = val;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
dist: (t) => {
|
|||
|
|
return Math.hypot(t[0].clientX - t[1].clientX, t[0].clientY - t[1].clientY);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
showGlobalDropOverlay: (show) => {
|
|||
|
|
elements.globalDropOverlay.style.display = show ? 'flex' : 'none';
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/* ------------------ Media handling ------------------ */
|
|||
|
|
const mediaHandlers = {
|
|||
|
|
processFile: (file) => {
|
|||
|
|
helpers.showLoading(true);
|
|||
|
|
state.currentFov = 80;
|
|||
|
|
elements.zoomInfo.textContent = 'Zoom: 80°';
|
|||
|
|
elements.videoControls.style.display = 'none';
|
|||
|
|
elements.stereoButton.style.display = 'none';
|
|||
|
|
state.stereoMode = 0;
|
|||
|
|
helpers.updateStereoButton();
|
|||
|
|
|
|||
|
|
const reader = new FileReader();
|
|||
|
|
reader.onload = (e) => {
|
|||
|
|
const url = e.target.result;
|
|||
|
|
state.currentMedia = url;
|
|||
|
|
state.isMediaImage = file.type.startsWith('image/');
|
|||
|
|
state.isMediaImage ? mediaHandlers.createImagePanorama(url) : mediaHandlers.createVideoPanorama(url);
|
|||
|
|
};
|
|||
|
|
reader.readAsDataURL(file);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
processStereoImage: (src, callback) => {
|
|||
|
|
const img = new Image();
|
|||
|
|
img.crossOrigin = "Anonymous";
|
|||
|
|
img.onload = () => {
|
|||
|
|
const canvas = document.createElement('canvas');
|
|||
|
|
const ctx = canvas.getContext('2d');
|
|||
|
|
|
|||
|
|
if (state.stereoMode === 1) { // Vertical (top/bottom)
|
|||
|
|
canvas.width = img.width;
|
|||
|
|
canvas.height = img.height / 2;
|
|||
|
|
ctx.drawImage(img, 0, 0, img.width, img.height / 2, 0, 0, canvas.width, canvas.height);
|
|||
|
|
} else if (state.stereoMode === 2) { // Horizontal (left/right)
|
|||
|
|
canvas.width = img.width / 2;
|
|||
|
|
canvas.height = img.height;
|
|||
|
|
ctx.drawImage(img, 0, 0, img.width / 2, img.height, 0, 0, canvas.width, canvas.height);
|
|||
|
|
} else {
|
|||
|
|
// Non-stereo, use full image
|
|||
|
|
canvas.width = img.width;
|
|||
|
|
canvas.height = img.height;
|
|||
|
|
ctx.drawImage(img, 0, 0);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
callback(canvas.toDataURL('image/jpeg', 0.95));
|
|||
|
|
};
|
|||
|
|
img.onerror = () => {
|
|||
|
|
helpers.showLoading(false);
|
|||
|
|
alert('Error loading image.');
|
|||
|
|
};
|
|||
|
|
img.src = src;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
createImagePanorama: (src) => {
|
|||
|
|
helpers.showLoading(true);
|
|||
|
|
|
|||
|
|
mediaHandlers.processStereoImage(src, (processedSrc) => {
|
|||
|
|
interfaceHandlers.cleanupScene();
|
|||
|
|
|
|||
|
|
state.scene = document.createElement('a-scene');
|
|||
|
|
state.scene.setAttribute('embedded','');
|
|||
|
|
state.scene.setAttribute('xr-mode-ui','enabled: true');
|
|||
|
|
|
|||
|
|
const sky = document.createElement('a-sky');
|
|||
|
|
sky.setAttribute('src', processedSrc);
|
|||
|
|
sky.setAttribute('material', 'npot: true');
|
|||
|
|
sky.setAttribute('rotation', '0 -90 0');
|
|||
|
|
sky.setAttribute('geometry', 'segmentsHeight: 64; segmentsWidth: 128');
|
|||
|
|
|
|||
|
|
const camera = document.createElement('a-entity');
|
|||
|
|
camera.setAttribute('camera', 'fov: 80');
|
|||
|
|
camera.setAttribute('look-controls', 'reverseMouseDrag: true');
|
|||
|
|
camera.setAttribute('wasd-controls', 'enabled: false');
|
|||
|
|
camera.setAttribute('position', '0 1.6 0');
|
|||
|
|
camera.setAttribute('id', 'mainCamera');
|
|||
|
|
|
|||
|
|
state.scene.appendChild(sky);
|
|||
|
|
state.scene.appendChild(camera);
|
|||
|
|
elements.aframeContainer.appendChild(state.scene);
|
|||
|
|
|
|||
|
|
sky.addEventListener('loaded', () => helpers.showLoading(false));
|
|||
|
|
sky.addEventListener('error', () => {
|
|||
|
|
helpers.showLoading(false);
|
|||
|
|
alert('Error loading panorama image.');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
elements.dropArea.classList.add('hidden');
|
|||
|
|
elements.controls.style.display = 'flex';
|
|||
|
|
elements.zoomInfo.style.display = 'block';
|
|||
|
|
elements.stereoButton.style.display = 'block';
|
|||
|
|
elements.resetButton.style.display = 'block';
|
|||
|
|
elements.screenshotButton.style.display = 'block';
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
createVideoPanorama: (src) => {
|
|||
|
|
interfaceHandlers.cleanupScene();
|
|||
|
|
|
|||
|
|
state.scene = document.createElement('a-scene');
|
|||
|
|
state.scene.setAttribute('embedded','');
|
|||
|
|
state.scene.setAttribute('xr-mode-ui','enabled: true');
|
|||
|
|
|
|||
|
|
// Assets
|
|||
|
|
const assets = document.createElement('a-assets');
|
|||
|
|
state.scene.appendChild(assets);
|
|||
|
|
|
|||
|
|
state.videoElement = document.createElement('video');
|
|||
|
|
state.videoElement.setAttribute('id', 'videoAsset');
|
|||
|
|
state.videoElement.setAttribute('src', src);
|
|||
|
|
state.videoElement.setAttribute('crossorigin', 'anonymous');
|
|||
|
|
state.videoElement.setAttribute('playsinline', '');
|
|||
|
|
state.videoElement.setAttribute('webkit-playsinline', '');
|
|||
|
|
state.videoElement.setAttribute('preload', 'metadata');
|
|||
|
|
state.videoElement.setAttribute('loop', '');
|
|||
|
|
assets.appendChild(state.videoElement);
|
|||
|
|
|
|||
|
|
// Videosphere
|
|||
|
|
const vidsphere = document.createElement('a-videosphere');
|
|||
|
|
vidsphere.setAttribute('src', '#videoAsset');
|
|||
|
|
vidsphere.setAttribute('rotation', '0 -90 0');
|
|||
|
|
state.scene.appendChild(vidsphere);
|
|||
|
|
|
|||
|
|
// Camera
|
|||
|
|
const camera = document.createElement('a-entity');
|
|||
|
|
camera.setAttribute('camera', 'fov: 80');
|
|||
|
|
camera.setAttribute('look-controls', 'reverseMouseDrag: true');
|
|||
|
|
camera.setAttribute('wasd-controls', 'enabled: false');
|
|||
|
|
camera.setAttribute('position', '0 1.6 0');
|
|||
|
|
camera.setAttribute('id', 'mainCamera');
|
|||
|
|
state.scene.appendChild(camera);
|
|||
|
|
|
|||
|
|
elements.aframeContainer.appendChild(state.scene);
|
|||
|
|
|
|||
|
|
// UI state
|
|||
|
|
elements.dropArea.classList.add('hidden');
|
|||
|
|
elements.controls.style.display = 'flex';
|
|||
|
|
elements.videoControls.style.display = 'flex';
|
|||
|
|
elements.zoomInfo.style.display = 'block';
|
|||
|
|
elements.stereoButton.style.display = 'none'; // Hide stereo button for videos
|
|||
|
|
elements.resetButton.style.display = 'block';
|
|||
|
|
elements.screenshotButton.style.display = 'block';
|
|||
|
|
state.isPlaying = true;
|
|||
|
|
helpers.updatePlayPauseIcon();
|
|||
|
|
|
|||
|
|
// Event listeners
|
|||
|
|
state.videoElement.addEventListener('loadedmetadata', () => {
|
|||
|
|
helpers.showLoading(false);
|
|||
|
|
elements.videoSlider.value = 0;
|
|||
|
|
state.videoElement.play().catch(() => {}); // autoplay may require user gesture
|
|||
|
|
});
|
|||
|
|
state.videoElement.addEventListener('timeupdate', helpers.updateSlider);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// Load media from URL if provided
|
|||
|
|
loadMediaFromUrl: (url, initialStereoMode = 0) => {
|
|||
|
|
helpers.showLoading(true);
|
|||
|
|
|
|||
|
|
// Set the stereo mode before loading
|
|||
|
|
state.stereoMode = initialStereoMode;
|
|||
|
|
helpers.updateStereoButton();
|
|||
|
|
|
|||
|
|
// Determine if it's a video based on extension
|
|||
|
|
const lowerUrl = url.toLowerCase();
|
|||
|
|
const isVideo = ['.mp4', '.webm'].some(ext => lowerUrl.endsWith(ext));
|
|||
|
|
|
|||
|
|
if (isVideo) {
|
|||
|
|
// Handle video (stereo mode not supported for videos in current implementation)
|
|||
|
|
state.currentMedia = url;
|
|||
|
|
state.isMediaImage = false;
|
|||
|
|
state.stereoMode = 0; // Reset stereo mode for videos
|
|||
|
|
mediaHandlers.createVideoPanorama(url);
|
|||
|
|
} else {
|
|||
|
|
// Handle image with stereo support
|
|||
|
|
const img = new Image();
|
|||
|
|
img.crossOrigin = "Anonymous";
|
|||
|
|
img.onload = () => {
|
|||
|
|
state.currentMedia = url;
|
|||
|
|
state.isMediaImage = true;
|
|||
|
|
mediaHandlers.createImagePanorama(url);
|
|||
|
|
};
|
|||
|
|
img.onerror = () => {
|
|||
|
|
helpers.showLoading(false);
|
|||
|
|
alert('Unsupported media type or inaccessible URL');
|
|||
|
|
};
|
|||
|
|
img.src = url;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/* ------------------ Interface handlers ------------------ */
|
|||
|
|
const interfaceHandlers = {
|
|||
|
|
takeScreenshot: () => {
|
|||
|
|
if (!state.scene) return;
|
|||
|
|
|
|||
|
|
// Temporarily hide UI elements
|
|||
|
|
const elementsToHide = [
|
|||
|
|
elements.zoomInfo,
|
|||
|
|
elements.controls,
|
|||
|
|
elements.stereoButton
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
// Store original display states
|
|||
|
|
const originalDisplays = elementsToHide.map(el => el.style.display);
|
|||
|
|
|
|||
|
|
// Hide elements
|
|||
|
|
elementsToHide.forEach(el => el.style.display = 'none');
|
|||
|
|
|
|||
|
|
// Let the render update (wait for next frame)
|
|||
|
|
requestAnimationFrame(() => {
|
|||
|
|
// Take screenshot of canvas
|
|||
|
|
const canvas = document.querySelector('canvas');
|
|||
|
|
if (!canvas) {
|
|||
|
|
// Restore UI and return
|
|||
|
|
elementsToHide.forEach((el, i) => el.style.display = originalDisplays[i]);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Create screenshot
|
|||
|
|
const dataURL = canvas.toDataURL('image/png');
|
|||
|
|
|
|||
|
|
// Create download link
|
|||
|
|
const downloadLink = document.createElement('a');
|
|||
|
|
downloadLink.href = dataURL;
|
|||
|
|
downloadLink.download = 'panorama-screenshot.png';
|
|||
|
|
|
|||
|
|
// Trigger download
|
|||
|
|
document.body.appendChild(downloadLink);
|
|||
|
|
downloadLink.click();
|
|||
|
|
document.body.removeChild(downloadLink);
|
|||
|
|
|
|||
|
|
// Show flash effect
|
|||
|
|
elements.screenshotFlash.style.opacity = '0.7';
|
|||
|
|
setTimeout(() => {
|
|||
|
|
elements.screenshotFlash.style.opacity = '0';
|
|||
|
|
}, 100);
|
|||
|
|
|
|||
|
|
// Show feedback
|
|||
|
|
elements.screenshotFeedback.style.opacity = '1';
|
|||
|
|
setTimeout(() => {
|
|||
|
|
elements.screenshotFeedback.style.opacity = '0';
|
|||
|
|
}, 2000);
|
|||
|
|
|
|||
|
|
// Restore UI
|
|||
|
|
setTimeout(() => {
|
|||
|
|
elementsToHide.forEach((el, i) => el.style.display = originalDisplays[i]);
|
|||
|
|
}, 300);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
cleanupScene: () => {
|
|||
|
|
if (state.scene) {
|
|||
|
|
elements.aframeContainer.removeChild(state.scene);
|
|||
|
|
state.scene = null;
|
|||
|
|
}
|
|||
|
|
if (state.videoElement) {
|
|||
|
|
state.videoElement.pause();
|
|||
|
|
state.videoElement = null;
|
|||
|
|
}
|
|||
|
|
elements.controls.style.display = 'none';
|
|||
|
|
elements.videoControls.style.display = 'none';
|
|||
|
|
elements.zoomInfo.style.display = 'none';
|
|||
|
|
elements.stereoButton.style.display = 'none';
|
|||
|
|
elements.resetButton.style.display = 'none';
|
|||
|
|
elements.screenshotButton.style.display = 'none';
|
|||
|
|
elements.dropArea.classList.remove('hidden');
|
|||
|
|
elements.fileInput.value = '';
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/* ------------------ Event Listeners ------------------ */
|
|||
|
|
// File input and drop area
|
|||
|
|
elements.selectButton.addEventListener('click', () => elements.fileInput.click());
|
|||
|
|
elements.fileInput.addEventListener('change', (e) => {
|
|||
|
|
if (e.target.files.length) mediaHandlers.processFile(e.target.files[0]);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Drag and drop events for initial drop area
|
|||
|
|
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(evt => {
|
|||
|
|
elements.dropArea.addEventListener(evt, helpers.preventDefaults);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
['dragenter', 'dragover'].forEach(evt => {
|
|||
|
|
elements.dropArea.addEventListener(evt, () => {
|
|||
|
|
elements.dropArea.style.borderColor = '#4285f4';
|
|||
|
|
elements.dropArea.style.background = '#e8f0fe';
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
['dragleave', 'drop'].forEach(evt => {
|
|||
|
|
elements.dropArea.addEventListener(evt, () => {
|
|||
|
|
elements.dropArea.style.borderColor = '#ccc';
|
|||
|
|
elements.dropArea.style.background = '#f5f5f5';
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
elements.dropArea.addEventListener('drop', (e) => {
|
|||
|
|
const f = e.dataTransfer.files[0];
|
|||
|
|
if (!f) return;
|
|||
|
|
const valid = /^image\/|video\/(mp4|webm)/.test(f.type);
|
|||
|
|
valid ? mediaHandlers.processFile(f) : alert('Please upload an image or MP4/WebM video file.');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Global drag and drop events
|
|||
|
|
document.addEventListener('dragenter', (e) => {
|
|||
|
|
helpers.preventDefaults(e);
|
|||
|
|
// Only show if there's already media loaded AND files are being dragged
|
|||
|
|
if (state.scene && !state.isDraggingFile && e.dataTransfer && e.dataTransfer.types.includes('Files')) {
|
|||
|
|
state.isDraggingFile = true;
|
|||
|
|
helpers.showGlobalDropOverlay(true);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
document.addEventListener('dragover', (e) => {
|
|||
|
|
helpers.preventDefaults(e);
|
|||
|
|
// Keep the overlay visible while dragging files
|
|||
|
|
if (state.isDraggingFile && e.dataTransfer && e.dataTransfer.types.includes('Files')) {
|
|||
|
|
helpers.showGlobalDropOverlay(true);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
document.addEventListener('dragleave', (e) => {
|
|||
|
|
helpers.preventDefaults(e);
|
|||
|
|
// Check if leaving the viewport
|
|||
|
|
if (e.clientX <= 0 || e.clientX >= window.innerWidth ||
|
|||
|
|
e.clientY <= 0 || e.clientY >= window.innerHeight) {
|
|||
|
|
state.isDraggingFile = false;
|
|||
|
|
helpers.showGlobalDropOverlay(false);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
document.addEventListener('drop', (e) => {
|
|||
|
|
helpers.preventDefaults(e);
|
|||
|
|
helpers.showGlobalDropOverlay(false);
|
|||
|
|
state.isDraggingFile = false;
|
|||
|
|
|
|||
|
|
const f = e.dataTransfer.files[0];
|
|||
|
|
if (!f) return;
|
|||
|
|
|
|||
|
|
const valid = /^image\/|video\/(mp4|webm)/.test(f.type);
|
|||
|
|
valid ? mediaHandlers.processFile(f) : alert('Please upload an image or MP4/WebM video file.');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Video controls
|
|||
|
|
elements.videoSlider.addEventListener('input', () => {
|
|||
|
|
if (!state.videoElement || !state.videoElement.duration) return;
|
|||
|
|
const newTime = (elements.videoSlider.value / 100) * state.videoElement.duration;
|
|||
|
|
state.videoElement.currentTime = newTime;
|
|||
|
|
if (!state.isPlaying) {
|
|||
|
|
// ensure texture updates while paused
|
|||
|
|
state.videoElement.pause();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
elements.playPauseButton.addEventListener('click', () => {
|
|||
|
|
if (!state.videoElement) return;
|
|||
|
|
state.isPlaying ? state.videoElement.pause() : state.videoElement.play().catch(() => {});
|
|||
|
|
state.isPlaying = !state.isPlaying;
|
|||
|
|
helpers.updatePlayPauseIcon();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Screenshot functionality
|
|||
|
|
elements.screenshotButton.addEventListener('click', interfaceHandlers.takeScreenshot);
|
|||
|
|
|
|||
|
|
// Reset button
|
|||
|
|
elements.resetButton.addEventListener('click', interfaceHandlers.cleanupScene);
|
|||
|
|
|
|||
|
|
// Stereo toggle
|
|||
|
|
elements.stereoButton.addEventListener('click', () => {
|
|||
|
|
if (!state.currentMedia) return;
|
|||
|
|
|
|||
|
|
// Cycle through stereo modes: Off -> Vertical -> Horizontal -> Off
|
|||
|
|
state.stereoMode = (state.stereoMode + 1) % 3;
|
|||
|
|
helpers.updateStereoButton();
|
|||
|
|
|
|||
|
|
// Reload the panorama with the new stereo mode
|
|||
|
|
if (state.isMediaImage) {
|
|||
|
|
mediaHandlers.createImagePanorama(state.currentMedia);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Zoom handlers
|
|||
|
|
document.addEventListener('wheel', (e) => {
|
|||
|
|
if (!state.scene) return;
|
|||
|
|
helpers.updateFov(Math.sign(e.deltaY) * 2);
|
|||
|
|
e.preventDefault();
|
|||
|
|
}, { passive: false });
|
|||
|
|
|
|||
|
|
// Pinch-to-zoom on laptop track pads and mobile devices
|
|||
|
|
let pinchStartDist = 0;
|
|||
|
|
document.addEventListener('touchstart', (e) => {
|
|||
|
|
if (e.touches.length === 2) pinchStartDist = helpers.dist(e.touches);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
document.addEventListener('touchmove', (e) => {
|
|||
|
|
if (e.touches.length === 2 && state.scene) {
|
|||
|
|
const d = helpers.dist(e.touches);
|
|||
|
|
if (Math.abs(d - pinchStartDist) > 5) {
|
|||
|
|
helpers.updateFov((pinchStartDist - d) > 0 ? 1 : -1);
|
|||
|
|
pinchStartDist = d;
|
|||
|
|
}
|
|||
|
|
e.preventDefault();
|
|||
|
|
}
|
|||
|
|
}, { passive: false });
|
|||
|
|
|
|||
|
|
// Remove default click & drag feature
|
|||
|
|
document.addEventListener('dragstart', (e) => {
|
|||
|
|
if (e.target.tagName === 'CANVAS' || e.target.closest('a-scene')) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Check for URL parameter and load media if present
|
|||
|
|
const mediaParams = getMediaUrlFromParams();
|
|||
|
|
if (mediaParams.url) {
|
|||
|
|
mediaHandlers.loadMediaFromUrl(mediaParams.url, mediaParams.stereoMode);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|