VirtHerc

360° Spherical VR Image Viewer

To create a viewer for displaying equirectangular images in a 360° spherical format, you can use the following HTML and JavaScript code. This example uses the A-Frame library to create the VR experience.

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>360° Spherical VR Viewer</title>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <style>
        body { margin: 0; }
        #image-list { position: fixed; top: 10px; left: 10px; z-index: 100; }
        #image-list img { cursor: pointer; width: 100px; height: auto; margin: 5px; }
    </style>
</head>
<body>

<div id="image-list">
    <img src="path/to/your/image1.jpg" onclick="openImage('path/to/your/image1.jpg')" alt="Image 1">
    <img src="path/to/your/image2.jpg" onclick="openImage('path/to/your/image2.jpg')" alt="Image 2">
    <img src="path/to/your/image3.jpg" onclick="openImage('path/to/your/image3.jpg')" alt="Image 3">
</div>

<a-scene>
    <a-sky id="sky" src="" rotation="0 -130 0"></a-sky>
    <a-entity camera look-controls position="0 1.6 0"></a-entity>
</a-scene>

<script>
    function openImage(imageUrl) {
        document.getElementById('sky').setAttribute('src', imageUrl);
    }
</script>

</body>
</html>

Instructions

Replace Image Paths: Update the src attributes of the <img> tags with the paths to your equirectangular images.
Launch the Viewer: Save the code in an HTML file and open it in a web browser. Click on the images to view them in a 360° spherical format.
A-Frame Library: This code uses the A-Frame library for rendering 3D and VR experiences, ensuring compatibility with most modern browsers.

Note

You may need to accommodate mobile devices and VR headsets for a fully interactive experience. Ensure to test your viewer for different screen sizes and devices.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>360° Spherical VR Viewer</title>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <style>
        body { margin: 0; }
        #image-list { position: fixed; top: 10px; left: 10px; z-index: 100; }
        #image-list img { cursor: pointer; width: 100px; height: auto; margin: 5px; }
    </style>
</head>
<body>

<div id="image-list">
    <img src="path/to/your/image1.jpg" onclick="openImage('path/to/your/image1.jpg')" alt="Image 1">
    <img src="path/to/your/image2.jpg" onclick="openImage('path/to/your/image2.jpg')" alt="Image 2">
    <img src="path/to/your/image3.jpg" onclick="openImage('path/to/your/image3.jpg')" alt="Image 3">
</div>

<a-scene>
    <a-sky id="sky" src="" rotation="0 -130 0"></a-sky>
    <a-entity camera look-controls position="0 1.6 0"></a-entity>
</a-scene>

<script>
    function openImage(imageUrl) {
        document.getElementById('sky').setAttribute('src', imageUrl);
    }
</script>

</body>
</html>