With the help of dedicated LORA’s like the LatentLabs360 – we can use the common StableDiffusion/A1111 generative pipeline to create working full panoramas from scratch. Thats pretty easy: just push the LORA in the prompt and generate an image with ratio of 2:1. Done 🙂

simple prototype/implementation of A-Frame with generated 360° panoramas

quick setup

The setup is pretty basic. It needs you to download the A-Frame repository and grab the dist folder. Copy it along with your index.html to your localhost or webspace.

Simply create a new index.html, copy all your panorama image files to the „img“ folder.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>360&deg; Image</title>
    <meta name="description" content="360&deg; Image - A-Frame">
    <script src="dist/aframe-master.js"></script>
    <style>
      #buttons-container {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 1;
      }

      .change-image-button {
        background-color: #FFF;
        color: #000;
        border: none;
        padding: 10px;
        margin: 5px;
        cursor: pointer;
        border-radius:30%;
      }
    </style>
  </head>
  <body>
    <div id="buttons-container">
      <button class="change-image-button" onclick="changeImage('img/cube1.png')"> 1</button>
      <button class="change-image-button" onclick="changeImage('img/cube2.png')"> 2</button>
      <button class="change-image-button" onclick="changeImage('img/cube3.png')"> 3</button>
       <button class="change-image-button" onclick="changeImage('img/cube4.png')">4</button>
      <button class="change-image-button" onclick="changeImage('img/cube5.png')"> 5</button>
      <button class="change-image-button" onclick="changeImage('img/cube6.png')"> 6</button>
    </div>

    <a-scene>
      <a-sky id="360-image" src="img/cube1.png" rotation="0 -130 0"></a-sky>

      <a-text font="kelsonsans" value="synthetic gardens" width="6" position="-2.5 10.25 -1.5"
              rotation="0 15 0"></a-text>
    </a-scene>

    <script>
      function changeImage(newSrc) {
        var skyElement = document.getElementById('360-image');
        skyElement.setAttribute('src', newSrc);
      }
    </script>
  </body>
</html>