loading...
Cover image for Super Easy 360 Image Viewer with A-Frame Less 20 Lines

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

kojikanao profile image Koji (he/him) ・1 min read

GitHub logo aframevr / aframe

🅰️ web framework for building virtual reality experiences.

A-Frame

A-Frame

A web framework for building virtual reality experiences.

Build Status Coverage Status Downloads Version License

SiteDocsSchoolSlackBlogNewsletter

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 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 framework on…

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

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 #

Posted on by:

kojikanao profile

Koji (he/him)

@kojikanao

Looking for opportunities! Software Engineer in NYC/Research Resident@NYU-ITP18-19 Mostly I work with reactjs and sometimes python. code to do something weird/useless/helpful Japanese

Discussion

pic
Editor guide