DEV Community

Cover image for Super Easy 360 Image Viewer with A-Frame Less 20 Lines
0xkoji
0xkoji

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-Frame

A-Frame

A web framework for building virtual reality experiences.

Coverage Status Downloads Version License

Site β€” Docs β€” School β€” Slack β€” Blog β€” Newsletter

Examples


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.

Features

πŸ‘“ Virtual Reality Made Simple: A-Frame handles the 3D and WebXR boilerplate required to get running across platforms including mobile, desktop, and all headsets (compatible with a WebXR capable browser) 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 and AR 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, WebXR, and WebGL.

βš‘β€¦

1. Create an index.html

<!DOCTYPE html>
<html>
  <head>
    <title>360View</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-assets>
        <img id="img" src="texture.jpg" />
      </a-assets>
      <a-sky id="img-360" radius="10" src="#img"> </a-sky>
    </a-scene>
  </body>
</html>
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 ↓
http://texturify.com/

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

Installation

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

Npm way

npm install -g live-server

Manual way

git clone https://github.com/tapio/live-server
cd live-server
npm install #
…

Top comments (0)