It’s easy to get started and powerful enough to build amazing applications.
Let’s get started with a simple THETA VR site using A-Frame.
Using your mobile phone, go to this sample link:
Put the mobile phone in Cardboard and you’ll be able to navigate the image by moving your phone.
The image will look like this. Press the goggle icon to split the image.
There’s nothing unusual here except that the main code is one line.
Fork the sample code on GitHub.
Copy your THETA pictures into the image sub-directory.
Open the file
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>RICOH THETA MeetUp Test Scene 1</title> <meta name="description" content="Panorama — A-Frame"> <script src="dist/aframe.js"></script> </head> <body> <a-scene> <a-sky src="image/1.jpg" rotation="0 -130 0"></a-sky> </a-scene> </body> </html>
src/1.jpg to the name of your file.
Push the file back up to GitHub Pages and view the URL in your browser. That’s it. You can now refer to the A-Frame site to come up with ideas to build your interface.
If you open the file on your local computer without uploading to GitHub Pages, you may see this:
Image from origin ‘file://’ has been blocked from loading by Cross-Origin Resource Sharing policy: Invalid response. Origin ‘null’ is therefore not allowed access.
The fastest way to sort this out is to simply to push to gh-pages.
I’m assuming that you’re familiar with gh-pages or can figure it out
with a quick web search. The super short version:
git add *, which will
add all your files
git commit -a,
git push. Make sure you push to
gh-pages branch. Your site will be up at