Here’s a quick Virtual Reality photo gallery I put together using Aframe. All images are my own, taken in Slovenia with a 360 camera. You can view the gallery here.

Aframe

This was my the first time using Aframe. To give it credit, it’s much simpler than Three.js as it’s basically a mark-up language. The syntax is simple and follows the same procedures as 3D modelling. For example, you need to set up your scene, camera and lighting. But setting the scene to render isn’t as necessary as three.js.

My scene consists of a skybox which essentially changes when you select a number from the menu. A cursor is connected to the camera by nesting it as a child within the camera tags.

<a-camera id="camera" look-controls>
 <a-cursor id="cursor" color="red">
  <a-animation begin="click" easing="ease-in" attribute="scale"
   fill="backwards" from="0.1 0.1 0.1" to="1 1 1" dur="150">
  </a-animation>
  <a-animation begin="cursor-fusing" easing="ease-in" attribute="scale"
   from="1 1 1" to="0.1 0.1 0.1" dur="1500">
  </a-animation>
 </a-cursor>
</a-camera>
Problems

Also the ‘buttons’ that change the image are planes with textures applied. It’s frustrating to consider the UX in this scenario and where to place the navigation. To further improve the experience I would rotate the camera to adjust the initial starting point of each image. Notice some of the starting points are facing into uninteresting areas.

<a-entity class="link"
 geometry="primitive: plane; height:1; width:1;"
 material="shader: flat; opacity: .7; src: ${thumb}"
 event-set__1="_event: mousedown; scale: 1 1 1"
 event-set__2="_event: mouseup; scale: 1.2 1.2 1"
 event-set__3="_event: mouseenter; scale: 1.2 1.2 1"
 event-set__4="_event: mouseleave; scale: 1 1 1"
 set-image="on: click; target: #image-360; src: ${src}">
</a-entity>

 

[More about these blogs.]