htmlaframe

display 360 degree image in a web page

i'm trying to add 360 degree image to my web page (panorama image)

i've try this , but it just display a black screen [demo

 
    <script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>

   <a-scene>
       <img id="panorama" src="https://i.sstatic.net/suKT3.jpg">
      <a-sky  src="#panorama" rotation="0 -90 0"></a-sky>
    </a-scene>

][1]

Solution

  • Hey I think there might be an issue with your image or the imgur link because of some x-frame options. Check this out. This is the example taken from aframe

    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
 <a-scene>
      <a-sky src="https://raw.githubusercontent.com/aframevr/aframe/v1.0.4/examples/boilerplate/panorama/puydesancy.jpg" rotation="0 -130 0"></a-sky>

      <a-text font="kelsonsans" value="Puy de Sancy, France" width="6" position="-2.5 0.25 -1.5"
              rotation="0 15 0"></a-text>
    </a-scene>