Craig OdaJesse Casman
Published © MIT

Easily Create a 360 Gallery For RICOH THETA with A-Frame

Using the open source A-Frame JavaScript library, write a few lines of code and get THETA 360 images working in a headset or Cardboard.

IntermediateFull instructions provided1 hour783
Easily Create a 360 Gallery For RICOH THETA with A-Frame

Things used in this project

Hardware components

RICOH THETA V
RICOH THETA V
×1

Software apps and online services

a-frame

Story

Read more

Code

Code snippet #1

Plain text
<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">

Code snippet #2

Plain text
<!-- 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>

Code snippet #3

Plain text
<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">

Code snippet #4

Plain text
<!-- 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>

Github

https://github.com/theta360developers/360gallery

Credits

Craig Oda
9 projects • 5 followers
Open source and Internet evangelist for 25 years. Involved with first ISP in Asia and major open source companies.
Contact
Jesse Casman
3 projects • 9 followers
Open source loving ice hockey playing New Mexican Japanophile
Contact

Comments

Please log in or sign up to comment.