Make panorama/360 degrees using aframe webVR

Question

I have multiple images (say North, East, South, West) and I want them to be shown as one combined panorama/360 view using aframe in java script, instead of each image to be shown as individual 360 view as a-sky does.

Here is a codepen for reference.

<script>
  AFRAME.registerComponent('set-sky', {
    schema: {default:''},
    init() {
      const sky = document.querySelector('a-sky');
      this.el.addEventListener('click', () => {
        sky.setAttribute('src', this.data);
      });
    }
  });
</script>

<a-scene>
  <a-camera position="0 2 4">
    <a-cursor color="#4CC3D9" fuse="true" timeout="10"></a-cursor>
  </a-camera>

  <a-sphere color="#F44336" radius="1" position="-4 2 0" set-
sky="https://c3.staticflickr.com/2/1475/26239222850_cabde81c39_k.jpg"></a-
sphere>

  <a-sphere color="#FFEB3B" radius="1" position="4 2 0" set-
sky="https://c2.staticflickr.com/2/1688/25044226823_53c979f8a1_k.jpg"></a-
sphere>

  <a-sky></a-sky>
</a-scene>

Relevant Blog:
https://blog.neondaylight.com/build-a-simple-web-vr-ui-with-a-frame-a17a2d5b484

Answer 1

As said in ngokevin's comment, You could either:

• create an entity made of planes with Your images, and place the camera inside:

  <a-entity position="0 0 0">
    <a-plane width="5" height="5" position="0 0 -2.5" 
       material="src:#north"></a-plane>
    <a-plane width="5" height="5" position="2.5 0 0" rotation="0 -90 0" 
       material="src:#west"></a-plane>
    <a-plane width="5" height="5" position="-2.5 0 0" rotation="0 90 0" 
       material="src:#east"></a-plane>
    <a-plane width="5" height="5" position="0 0 2.5" rotation="0 180 0" 
       material="src:#south"></a-plane>
  </a-entity>
  

  But you need to fill it with some ground and top, so you could try to:

• create a cubemap out of six images:

  <a-assets>
    <a-cubemap id="sky">
      <img src="right.png" crossorigin="anonymous">
      <img src="left.png" crossorigin="anonymous">
      <img src="top.png" crossorigin="anonymous">
      <img src="bottom.png" crossorigin="anonymous">
      <img src="front.png" crossorigin="anonymous">
      <img src="back.png" crossorigin="anonymous">
    </a-cubemap>
  </a-assets>
  <a-entity  position="0 0 0" rotation="0 0 0" scale="3 3 3" 
   geometry="primitive: box;" material="envMap: #sky; 
   roughness: 0;metalness:1;side:back"></a-entity>
  

A demo consisting of both options is here. Just navigate Yourself with wasd-controls inside the cubemap, or planes.
Check out the source code here.