Hardware components | ||||||
 |
| × | 1 | |||
Software apps and online services | ||||||
| ||||||
Using the open source A-Frame JavaScript library, you can write a few lines of code and get THETA 360 images working in a headset or Cardboard with navigation.
Headset navigation works by displaying a round cursor inside the headset viewthat corresponds to the focus of your attention. If you turn the headset so that thecursor is on a menu, you will jump to another sphere. In actual use, it feels natural. Youjust stare at a menu for a second and then the jump occurs. The delay for the stare isconfigurable within your code.
In this example, the menus are stuck to a location in the sphere. Moving your head causes the menus to move.
Creating Menus.
Download Boilerplate Code from GitHubFork the demo on GitHub and clone to your local drive.
Drop your 360 images from the THETA into img/
. Open index.html
in your editor.
Using an image editor like PhotoShop create thumbnail images that are240x240 pixels. For this example, I’m using bitmap image text menus. You can also drop in small images as the navigational menu.
In your editor, change the id
and the src
to match your files. If you are new to programming, simply overwrite 1.jpg
in your /img
folder with your own image file first for testing. If you use the same image file names, you do not need to edit the code at all.
<body>
<a-scene>
<a-assets>
<img id="kieran" src="img/1.jpg">
<img id="kieran-thumb" crossorigin="anonymous" src="img/kieran-thumb.png">
<img id="christian-thumb" crossorigin="anonymous" src="img/christian-thumb.png">
<img id="eddie-thumb" crossorigin="anonymous" src="img/eddie-thumb.png">
<audio id="click-sound" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/audio/click.ogg"></audio>
<img id="christian" crossorigin="anonymous" src="img/2.jpg">
<img id="eddie" crossorigin="anonymous" src="img/4.jpg">
Assuming you are changing the file names, then edit the code for themenu links.
<!-- 360-degree image. -->
<a-sky id="image-360" radius="10" src="#kieran"></a-sky>
<!-- Image links. -->
<a-entity id="links" layout="type: line; margin: 1.5" position="0 -1 -4">
<a-entity template="src: #link" data-src="#christian" data-thumb="#christian-thumb"></a-entity>
<a-entity template="src: #link" data-src="#kieran" data-thumb="#kieran-thumb"></a-entity>
<a-entity template="src: #link" data-src="#eddie" data-thumb="#eddie-thumb"></a-entity>
</a-entity>
That’s it. Add all your files to your local git repo, commit, and push to your forked repo, gh-pages branch. You should then be able to view your app at username.github.io/360gallery/
Running an HTTP Server Locally for TestingYou won’t be able to open the index.html
file locally for testing due to CORS security. For testing, I’m running the Apache2 web server on Ubuntu 16.04 in Vagrant. I’m running Vagrant on Windows 10 Anniversary Edition. I then use Firefox or Chrome running on my Windows 10 host to view the 360 images in the Linux VM. I’m editing the files using Atom running natively on Windows 10. The files are inside of the Linux VM, but I can access them from Windows. The end result is that I can access http://localhost:8080/gallery and test my application locally.
If this sounds like too much hassle, just load the files up to GitHub Pages.
Please enable JavaScript to view the comments powered by Disqus.
Comments
Please log in or sign up to comment.