How to make an A-Frame 360 3D Gallery for VR?

Question

I think it is important for a 360 gallery to have a 360 3D option, because 3D images are more impressive in VR.

A-Frame has an example for a 360 gallery: https://aframe.io/aframe/examples/docs/360-gallery/ https://glitch.com/~aframe-gallery

And there is an example for showing a stereoscopic 360 3D image: https://www.npmjs.com/package/aframe-stereo-component https://glitch.com/~a-frame-stereo-component

Unfortunately for me as I am not a programmer, more a photographer, it’s difficult to combine them, to have a 360 3d gallery.

I see two solutions, but no idea how to write the code correct.

1. On click two skys have to update, instead of just one in the gallery example. I have added a second sky (right eye), which needs to be changed on click (annotations): https://glitch.com/edit/#!/a-frame-360-3d-gallery

<script id="link" type="text/html">
        <a-entity class="link"
        geometry="primitive: plane; height: 1; width: 1"
        material="shader: flat; src: ${thumb}"
        sound="on: click; src: #click-sound"
        event-set__mouseenter="scale: 1.2 1.2 1"
        event-set__mouseleave="scale: 1 1 1"
        event-set__click="_target: #sky1; _delay: 300; material.src: ${src}" /* second eye needed, kind of: _target: #sky2; _delay: 300; material-right.src: ${src} */
        proxy-event="event: click; to: #sky1; as: fade; #sky2; as: fade"></a-entity>
</script>
                                                                            

<a-entity id="links" layout="type: line; margin: 1.5" position="-1.5 -1 -4">
<a-entity template="src: #link" data-src="#img1-left" data-thumb="#notyet"></a-entity> <!-- second eye needed, kind of: data-src-right="#img1-right" -->
<a-entity template="src: #link" data-src="#img2-left" data-thumb="#notyet"></a-entity> <!-- second eye needed, kind of: data-src-right="#img2-right" -->
<a-entity template="src: #link" data-src="#img3-left" data-thumb="#notyet"></a-entity> <!-- second eye needed, kind of: data-src-right="#img3-right" -->
</a-entity>

2. Other option is to not split the stereo images into two pieces. But therefore the stereo component has to be changed: https://glitch.com/edit/#!/a-frame-stereo-component

For stereo Videos the A-Frame example does not split the files as well: https://www.npmjs.com/package/aframe-stereo-component Maybe there is the needed code already. To be honest, I don’t get the advantage of splitting the stereo image files, which mostly is one file originally.

I am not sure which solution to prefer. But I thought solution 1 makes more sense, because solution 2 will have a good reason I just don’t know about.

Thanks for helping out. I love a-frame and the existing examples.

Greetings, qwertz