DEV Community

Cover image for Super Easy 360 Image Viewer with A-Frame Less 20 Lines
Koji (he/him)
Koji (he/him)

Posted on

Super Easy 360 Image Viewer with A-Frame Less 20 Lines

GitHub logo aframevr / aframe

🅰️ web framework for building virtual reality experiences.



A web framework for building virtual reality experiences.

Build Status Coverage Status Downloads Version License


Special Sponsors


Supercraft A-Painter Supermedium A-Blast A-Saturday-Night Musical Forest by @googlecreativelab

Find more examples on the homepage, A Week of A-Frame, and WebVR Directory.


👓 Virtual Reality Made Simple: A-Frame handles the 3D and WebVR boilerplate required to get running across platforms including mobile, desktop, Vive, and Rift just by dropping in <a-scene>.

❤️ Declarative HTML: HTML is easy to read and copy-and-paste. Since A-Frame can be used from HTML, A-Frame is accessible to everyone: web developers, VR enthusiasts, educators, artists, makers, kids.

🔌 Entity-Component Architecture: A-Frame is a powerful framework on top of three.js, providing a declarative, composable, reusable entity-component structure for three.js. While A-Frame can be used from HTML, developers have unlimited access to JavaScript, DOM APIs, three.js, WebVR, and WebGL.

Performance: A-Frame is a thin…

1. Create an index.html

<!DOCTYPE html>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src=""></script>
        <img id="img" src="texture.jpg" />
      <a-sky id="img-360" radius="10" src="#img"> </a-sky>
Enter fullscreen mode Exit fullscreen mode

2. Get a 360 image

In the index.html, the file name is texture.jpg. You can rename a 360 image or change tag'ssrc attribute.
You can find out nice 360 images ↓

3. Run your local server

For this, I used live-server

$ npm i -g live-server
$ live-server
Enter fullscreen mode Exit fullscreen mode

Then, open localhost:8080

GitHub logo tapio / live-server

A simple development http server with live reload capability.

view on npm npm module downloads per month build status

Live Server

This is a little development server with live reload capability. Use it for hacking your HTML/JavaScript/CSS files, but not for deploying the final site.

There are two reasons for using this:

  1. AJAX requests don't work with the file:// protocol due to security restrictions, i.e. you need a server if your site fetches content through JavaScript.
  2. Having the page reload automatically after changes to files can accelerate development.

You don't need to install any browser plugins or manually add code snippets to your pages for the reload functionality to work, see "How it works" section below for more information. If you don't want/need the live reload, you should probably use something even simpler, like the following Python-based one-liner:

python -m SimpleHTTPServer


You need node.js and npm. You should probably install this globally.

Npm way

npm install -g live-server

Manual way

git clone
cd live-server
npm install #

Discussion (0)