A-Frame
A web framework for building virtual reality experiences.
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.
⚡…
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 #
Top comments (0)