-2

I have a simple Aframe code which is displaying an image in 360 degrees. The code:

<html>
<head>
    <meta charset="utf-8">
    <title>360&deg; Image</title>
    <meta name="description" content="360&deg; Image - A-Frame">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/0.7.1/aframe.js"></script>
  </head>
  <body>
    <a-scene>
      <a-sky src="background3.png"></a-sky>

    </a-scene>
  </body>
</html>

It works fine in my desktop. But when I host it and view it in mobile, it appears completely tilted, when viewed in a mobile chrome VR mode. Example: https://deepak-m.surge.sh/

This is the output I get in my mobile: enter image description here

You can see that it is completely tilted. The actual image in desktop looks like this: enter image description here

There is a similar issue described here: https://github.com/aframevr/aframe/issues/3458

Note: I seriously do not understand the downvote. Care to explain please?

codingsplash
  • 4,785
  • 12
  • 51
  • 90

1 Answers1

0

Apparently this is caused by some chrome issue. Using a different version of aframe fixed it. This is the version I used to fix this: https://rawgit.com/aframevr/aframe/master/dist/aframe-master.min.js

codingsplash
  • 4,785
  • 12
  • 51
  • 90