Equirectangular Panorama Viewer

A standalone equirectangular panorama viewer built with Three.js and HTML5. Works with Apache2 and requires no build process or dependencies.

Features

• Drag & Drop: Simply drag and drop a JPG or PNG panorama image onto the page
• Load Button: Click the "Load Image" button to browse and select an image
• Panorama Selector: Dropdown menu that automatically lists all panoramas from the /panos folder
• Interactive Controls:
  • Drag to rotate the view
  • Scroll to zoom in/out
• Touch Support: Works on touch devices

Installation

1. Copy index.html and panos.json to your Apache2 web server directory (e.g., /var/www/html/ or your virtual host directory)
2. Create a /panos folder in the same directory and place your panorama images (JPG/PNG) there
3. Run generate_panos_json.sh to generate the panos.json file listing all panoramas:

   ./generate_panos_json.sh

   Or manually edit panos.json to add your panorama files
4. Ensure the files have appropriate permissions
5. Access via your web browser through the web server

Note:

• Run generate_panos_json.sh whenever you add or remove panorama images to update the dropdown list
• The panorama dropdown requires a web server (HTTP/HTTPS) to load panos.json. Opening the HTML file directly via file:// protocol will not load the dropdown list due to browser security restrictions. However, drag & drop and the "Load Image" button will still work locally.

Usage

1. Open the page in your web browser (via web server for full functionality)
2. Load a panorama using one of these methods:
   • Select from dropdown: Choose a panorama from the dropdown menu (requires web server - loads from panos.json)
   • Drag & Drop: Drag and drop a JPG or PNG panorama image onto the page (works locally and on server)
   • Load Image button: Click the "Load Image" button and select an image file (works locally and on server)
3. The panorama will be displayed in 360° view
4. Use your mouse/touch to drag and rotate the view
5. Use the mouse wheel to zoom in and out

Local Testing

For local testing without a full web server setup, you can use a simple local web server:

# Python 3
python -m http.server 8000

# PHP
php -S localhost:8000

# Node.js (if you have http-server installed)
npx http-server -p 8000

Then open http://localhost:8000 in your browser.

Requirements

• Modern web browser with WebGL support
• Apache2 web server (or any web server)
• Equirectangular panorama images (JPG or PNG format)
• Bash shell (for the JSON generator script, or manually edit panos.json)

Technical Details

• Uses Three.js (loaded from CDN)
• Pure JavaScript/HTML - no server-side processing required
• Static JSON file (panos.json) lists available panoramas (loaded via fetch API)
• Bash script (generate_panos_json.sh) generates the JSON file from /panos folder
• No build process required
• No server-side dependencies (no PHP, Node.js, etc. needed)
• Requires a web server (HTTP/HTTPS) for the dropdown selector to work (due to browser CORS restrictions with file:// protocol)

File Structure

your-web-directory/
├── index.html              # Main viewer page
├── panos.json              # JSON file listing available panoramas
├── generate_panos_json.sh  # Script to generate panos.json
└── panos/                  # Folder containing panorama images
    ├── panorama1.jpg
    ├── panorama2.png
    └── ...

Updating the Panorama List

Whenever you add or remove panorama images from the /panos folder, run:

./generate_panos_json.sh

This will regenerate panos.json with the current list of images. Alternatively, you can manually edit panos.json using this format:

[
  {
    "name": "panorama1.jpg",
    "path": "panos/panorama1.jpg"
  },
  {
    "name": "panorama2.png",
    "path": "panos/panorama2.png"
  }
]