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

aframevr / aframe

🅰️ Web framework for building virtual reality experiences.

A-Frame

A web framework for building virtual reality experiences.

Site — Docs — School — Slack — Blog — Newsletter

Examples

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.

⚡…

View on GitHub

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>

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

Then, open localhost:8080

tapio / live-server

A simple development http server with live reload capability.

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:

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.
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 #

…

View on GitHub